web3D react 3 fiber R3F move camera code

cameraMove.jsx

// all these hooks MUST be inside the react components
const cameraState = useContext(SceneContext);  
useFrame(state => {
    const vectorGo = new THREE.Vector3();
    vectorGo.set(...cameraState.position);
    const vector = new THREE.Vector3();
    const vector2 = new THREE.Vector3();
    vector.set(...cameraState.target);
    vector2.set(...cameraState.target);
    // const intDistance = 10.75;
    // state.camera.position.x = intDistance * Math.sin(state.clock.getElapsedTime() / 10);
    // state.camera.position.z = intDistance * Math.cos(state.clock.getElapsedTime() / 10);
    state.camera.lookAt(vector2.lerp(vector, 0.01));
    state.camera.position.lerp(vectorGo, 0.01);
    state.camera.updateProjectionMatrix();
  });
const moveTo = (target, position) => {
    setCameraState({
      target: target, 
      position: position});
  }
  return (    
    <SceneContext.Provider value={cameraState}>
        <Canvas shadows gl={{ physicallyCorrectLights: true, toneMappingExposure:.1 }}>
          <Scene />
        </Canvas>
      <div style={{position:'absolute',top:10,left:10,fontSize:20}} >
        <div className='btn' onClick={()=>{moveTo([0,1,0],[0,2,0])}}> Center Table</div>
        <div className='btn' onClick={()=>{moveTo([0,2,0],[0,1,13])}}> Entrance</div>
      </div>
    </SceneContext.Provider>
  );