How to use PointerLockControls with useFrame - three.js

Question

I will implement an effect that I can move camera around an object.
Error example is this and I need to fix it. The difference between this and the latter is that this can update camera position to a 3D object in a model. This example eventually can move camera around a 3D object after updating camera position. But if I follow general use case, i.e. the latter, it can't function correctly. I wonder what's difference between this and the latter.
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>
);
};
And this example functions correctly.
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>
);
};