I'm having some difficulty getting my camera to follow an object. The object is using a hook useSphere from @react-three/cannon. My sphere moves around fine, but the camera does not follow. Ive narrowed it down to my sphere position is not being updated because matrixAutoUpdate gets set to false. I'm unsure why this is happening because on other examples of Cannon that I tested matrixAutoUpdate stays true. Any ideas would be awesome, I have been stuck for a while and can't find anything on internet. Below is some code

import React from "react";
import {useFrame, useThree} from "@react-three/fiber";
import {useKeyboardControls} from "../hooks/useKeyboardControls";
import {FPVControls} from "./FPVControls";
import {Vector3} from "three";
import {useSphere} from "@react-three/cannon";

const SPEED = 6

export const Player = (props) => {
    const {camera} = useThree()

    //sphere movement controls
    const {
        moveForward,
        moveBackward,
        moveLeft,
        moveRight,
        jump
    } = useKeyboardControls()


    const [ref, api] = useSphere(() => ({
        mass: 1,
        type: 'Dynamic',
        ...props
    }))


    useFrame(() => {
        camera.position.copy(ref.current.position)
        const direction = new Vector3()

        const frontVector = new Vector3(
            0,
            0,
            (moveBackward ? 1 : 0) - (moveForward ? 1 : 0)
        )

        const sideVector = new Vector3(
            (moveLeft ? 1 : 0) - (moveRight ? 1 : 0),
            0,
            0
        )

        direction
            .subVectors(frontVector, sideVector)
            .normalize()
            .multiplyScalar(SPEED)
            .applyEuler(camera.rotation)

        api.velocity.set(direction.x, 0, direction.z)
    })

    console.log("ref position", ref)

    return (
        <>
            <FPVControls/>
            <mesh ref={ref}>
                <sphereGeometry  />
                <meshStandardMaterial color={"#f30707"} />
            </mesh>
        </>
    )
}