Trying to use the useRef hook with <Instances /> but the types are failing to work

Questions
, , ,
1

Hi, I’m trying to provide the ref prop to the Instances React component and it keeps giving me an error.

This is the error:

Type 'MutableRefObject<InstancedMesh<BufferGeometry<NormalBufferAttributes>, Material | Material[], InstancedMeshEventMap>>' is not assignable to type 'LegacyRef<InstancedMesh> | undefined'.
  Type 'MutableRefObject<InstancedMesh<BufferGeometry<NormalBufferAttributes>, Material | Material[], InstancedMeshEventMap>>' is not assignable to type 'RefObject<InstancedMesh>'.
    Types of property 'current' are incompatible.
      Type 'InstancedMesh<BufferGeometry<NormalBufferAttributes>, Material | Material[], InstancedMeshEventMap>' is not assignable to type 'InstancedMesh'.
        Type 'InstancedMesh<BufferGeometry<NormalBufferAttributes>, Material | Material[], InstancedMeshEventMap>' is not assignable to type '{ instanceMatrix: InstancedBufferAttribute; instanceColor: InstancedBufferAttribute; }'.
          Types of property 'instanceColor' are incompatible.
            Type 'InstancedBufferAttribute | null' is not assignable to type 'InstancedBufferAttribute'.
              Type 'null' is not assignable to type 'InstancedBufferAttribute'.

This is the code that I am using and I am not sure what type I should use for the ref.
^ : is where the error is coming from

function Cubes() {
  const ref = useRef<InstancedMesh>(null!);

  useFrame(({pointer}, delta) => void (ref.current.rotation.y = easing.damp3(ref.current.rotation.y, (-pointer.x * Math.PI) / 6, 2.75, delta)))

  return <Instances limit={cubes.length} ref={ref} position={[0,0,0]} ></Instances>
}                                         ^

My import statements:

import { Instances } from '@react-three/drei';
import { InstancedMesh } from 'three';

Any help would be greatly appreciated!
2

i think drei defines InstancedMesh as

type InstancedMesh = Omit<THREE.InstancedMesh, 'instanceMatrix' | 'instanceColor'> & {
  instanceMatrix: THREE.InstancedBufferAttribute
  instanceColor: THREE.InstancedBufferAttribute
}

i don’t know TS enough to know why it does that. typecast it for now into any or that, and if you like you could take a look at the drei types and see if there’s something that could be done.

4

I’ve set the type as any for now. Just feels a bit hacky.

That’s the thing, though, the type of Instances is set to InstancedMesh according to drei which is confusing.

(alias) const Instances: ForwardRefComponent<InstancesProps, InstancedMesh>
import Instances

I have also tried using InstancesProps as the type but that doesn’t work either.