use case: PointerLockControls with useFrame

[MakitaToki]

One use case is this.

function Button(props) {
  const vec = new THREE.Vector3(0, 3, 5);
  const { x, y, z } = props.position;

  if (x && y && z) {
    vec.set(x, y, z);
  }

  useFrame((state) => {
    const step = 0.1;
    state.camera.position.lerp(vec, step);
    state.camera.lookAt(0, 0, 0);
    state.camera.updateProjectionMatrix();
  });

  return null;
}

const ModelCanvas = (props) => {

  return (
    <div className="center">
      <Canvas
        shadowMap
        style={{ background: "#ffffff" }}
        camera={{ position: [0, 3, 10], fov: 100 }}
        gl={{ antialias: false, logarithmicDepthBuffer: true }}
        id="my-canvas"
      >
        <ambientLight intensity={0.5} />
        <pointLight position={[0, 60, -100]} intensity={20} />
        <pointLight position={[-50, 0, -50]} intensity={2} />
        <spotLight
          castShadow
          intensity={8}
          angle={Math.PI / 10}
          position={[10, 10, 10]}
          shadow-mapSize-width={2048}
          shadow-mapSize-height={2048}
        />
        <Suspense fallback={null}>
          <Model url={"/compressed.glb"} />
        </Suspense>
        {/* <PointerLockControls /> */}
        <Button position={props.value} />
        <PointerLockControls />
      </Canvas>
    </div>
  );
}; 

Another is this.

const ModelCanvas = (props) => {
  return (
    <div className="center">
      <Canvas
        shadowMap
        style={{ background: "#ffffff" }}
        camera={{ position: [0, 3, 10], fov: 100 }}
        gl={{ antialias: false, logarithmicDepthBuffer: true }}
        id="my-canvas"
      >
        <ambientLight intensity={0.5} />
        <pointLight position={[0, 60, -100]} intensity={20} />
        <pointLight position={[-50, 0, -50]} intensity={2} />
        <spotLight
          castShadow
          intensity={8}
          angle={Math.PI / 10}
          position={[10, 10, 10]}
          shadow-mapSize-width={2048}
          shadow-mapSize-height={2048}
        />
        <Suspense fallback={null}>
          <Model url={"/compressed.glb"} />
        </Suspense>
        {/* <PointerLockControls /> */}
        {/* <Button position={props.value} /> */}
        <PointerLockControls />
      </Canvas>
    </div>
  );
};

In former, I want to implement a functionality like the latter.
What's difference between them? Why can't the former function correctly?