camera control issues.

[valid sky]

Hi,
It's as if the camera position is being reset and then moved to the right position right after.
Please check this video.

so slider components change the val with useState, but it seems it re-render when I change the value of val

This is code.
<ModelWrapper> <Suspense fallback={<Loader />}> <Canvas camera={camera}> <ambientLight /> <OrbitControls ref={controls} enableZoom={false} enableRotate={true} target={target} maxPolarAngle={1.35} minPolarAngle={1.35} /> {/* <Rig /> */} <Scene /> {/* {tenanciesJSON?.map((box, index) => ( <Box key={index} position={box.position} scale={box.scale} joratoId={box.id} /> ))} */} </Canvas> <Slider changeSlider={(val) => setVal(val)} /> </Suspense>

And

    const vec = new Vector3();
    function Rig() {
        var radius = 65;
        return useFrame(({ camera }) => {
            const adjustedVal = val - initialRotation;
            let rotateX =
                radius * Math.sin((adjustedVal / 100) * 2 * Math.PI) +
                target[0];
            let rotateY = target[1]; // The y-coordinate of the camera stays the same as the center of the object
            let rotateZ =
                radius * Math.cos((adjustedVal / 100) * 2 * Math.PI) +
                target[2];
            vec.set(rotateX, rotateY + 10, rotateZ);
            camera.position.lerp(vec, 0.05);
        });
    }