Camera goes down after saving the code

[Hedes-Productions]

I'm working on a 3D website project and I use react-three-fiber(R3F) for it. So I needed to move my camera custom when scrolling in R3F. So this code worked fine. But the problem is when I save my code after scrolling a bit, the camera suddenly goes down. So what's the problem with this code? Please can someone explain that to me? I'm very confused about what's going on here. Here is the code.

const AnimationCanvas = () => {
  return (
    <Canvas camera={{ position: [100, 0, 12], fov: 75 }}>
      <Suspense fallback={null}>       
        <ScrollControls damping={4} distance={1} pages={3} vertical={true}>
          <Scroll>                           
            <CameraMovement />                                            
          </Scroll>
        </ScrollControls>
      </Suspense>
    </Canvas>
  );
};

const CameraMovement = () => {
  const scrollParams = useScroll();
  let scrollTriggered = false;
  const position1 = new Vector3().set(-20, 0, 250);
  const position2 = new Vector3().set(200, 50, 200);
  useFrame((state) => {
    console.log(scrollParams.offset);
    if (scrollParams.offset < 0.1) {
      state.camera.position.lerp(position1, 0.12);
      state.camera.updateProjectionMatrix();
    }
    if (scrollParams.offset > 0.1 && scrollParams.offset < 0.2) {
      state.camera.position.lerp(position2, 0.12);
      state.camera.updateProjectionMatrix();
    }        
  });
};

I really appreciate any help you can provide.