Error occurred while using the {...bind} in the animated.mesh

Question

Getting error while using bind with animated.mesh:

"Type '{ children: Element; key: number; name: any; ref: (ref: Mesh<BufferGeometry<NormalBufferAttributes>, Material | Material[], Object3DEventMap> | null) => void; ... 158 more ...; scale: SpringValue<...>; }' is not assignable to type 'AnimatedProps<Omit<ExtendedColors<Overwrite<Partial<Mesh<BufferGeometry<NormalBufferAttributes>, Material | Material[], Object3DEventMap>>, NodeProps<...>>>, NonFunctionKeys<...>> & { ...; } & EventHandlers>'.
  Types of property 'onClick' are incompatible.
    Type 'MouseEventHandler<EventTarget> | undefined' is not assignable to type '((event: ThreeEvent<MouseEvent>) => void) | undefined'.
      Type 'MouseEventHandler<EventTarget>' is not assignable to type '(event: ThreeEvent<MouseEvent>) => void'.
        Types of parameters 'event' and 'event' are incompatible.
          Type 'IntersectionEvent<MouseEvent> & Properties<MouseEvent>' is missing the following properties from type 'MouseEvent<EventTarget, MouseEvent>': getModifierState, preventDefault, isDefaultPrevented, isPropagationStopped, persistts(2322)
(property) mesh: AnimatedComponent<FC<MeshProps>>"

const BasicOrangeBox = ({setControlsDisabled, startPosition} : BasicRedBoxType) => {
    const { raycaster } = useThree();
    const [boxPosition, setBoxPosition] = useState(startPosition);
    const planeRef = useContext(PlaneContext);    

    const bind = useGesture({
        onDrag: () => {
            const intersects = raycaster.intersectObjects([planeRef]);
            if (intersects.length > 0){
                const intersection = intersects[0];
                console.log(intersection.point.x);
                setBoxPosition({
                    x: intersection.point.x,
                    y: intersection.point.y,
                    z: intersection.point.z,
                })
            }
            setControlsDisabled(true);
        },
        onDragEnd: () => {
            setControlsDisabled(false);
        }
    })

    return ( 
<a.mesh     
{...bind()}
>   
<mesh 
            
            position={[boxPosition.x, boxPosition.y, boxPosition.z]}
        >
            <boxGeometry />
            <meshBasicMaterial color={"orange"} />
        </mesh>
</a.mesh>
    )

How can I resolve this error