Can't ref usePlane hook to mesh in Typescript

[slyofzero]

I have the bellow code in my react app using react-three/cannon in NextJS with TypeScript

import { usePlane } from "@react-three/cannon";

const Ground = () => {
  const [ref, api] = usePlane(() => ({
    rotation: [0, 0, 0],
    position: [0, 0, 0],
  }));

  return (
    <mesh ref={ref}>
      <planeBufferGeometry attach={"geometry"} args={[100, 100]} />
      <meshStandardMaterial attach={"material"} color={"hotpink"} />
    </mesh>
  );
};

When I try to pass the ref I get from usePlane into mesh I get a TypeError saying -

Type 'RefObject<Object3D<Event>>' is not assignable to type 'Ref<Mesh<BufferGeometry | Material | Material[]>> | undefined'

Everything else here is working the way it should, it's just this error that's an issue. What can be done to solve this issue?

[fnwk]

To fix the issue you need to add Mesh type definition.

import { Mesh } from "three";
import { usePlane } from "@react-three/cannon";

const Ground = () => {
  const [ref, api] = usePlane<Mesh>(() => ({
    rotation: [0, 0, 0],
    position: [0, 0, 0],
  }));

  return (
    <mesh ref={ref}>
      <planeBufferGeometry attach={"geometry"} args={[100, 100]} />
      <meshStandardMaterial attach={"material"} color={"hotpink"} />
    </mesh>
  );
};

export default Ground;