Can't update position of camera with pointerLockControls react-three-fiber

Question

I am following this walkthrough and I am trying to implement pointerLockControls with the ability to move, but for some reason I can't, I can use pointerLockControls to lookAround but when I press key it doesn't update my camera position

here is the code

import { useEffect, useRef } from "react";
import { Vector3 } from "three";
import { useSphere } from "@react-three/cannon";
import { useFrame, useThree } from "@react-three/fiber"
import { PointerLockControls } from "@react-three/drei";

import { usePlayerControls } from "../hooks/playerControls.hook";

export default function Player(): JSX.Element {
    const { moveForward, moveBackward, moveLeft, moveRight } = usePlayerControls();
    const { camera } = useThree();

    const [ref, api] = useSphere(() => ({
        mass: 1,
        type: "Dynamic",
        position: [0, 1, 0],
    }));

    const velocity = useRef([0, 0, 0]);
    useEffect(() => {
        api.velocity.subscribe((v) => {
            velocity.current = v
        });
    }, [])

    useFrame(() => {
        if (ref.current) {
            camera.position.copy(ref.current?.position);
        }

        const direction = new Vector3();
        const frontVector = new Vector3(0, 0, Number(moveBackward) - Number(moveForward));
        const sideVector = new Vector3(Number(moveLeft) - Number(moveRight), 0, 0);

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

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

        console.log(camera.position);
    },);


    return <>
        <PointerLockControls />
        <mesh ref={ref} position={[3, 3, 3]}></mesh>
    </>
}