Jump rotation after centering in screen

Hello community, first time posting here.

I have a little issue i can rotate my planet with drag and its working, have some markers on it and when clicking it centers the camera and rotates the planet, so the marker is in the center, it works but the issue is depending on the marker when i drag the planet again it suddenly jumps and the rotation is messed up, the planet is upside down, dont know why its happening

so this is the code i use for drag, move it


```

const onPointerDown = (e) => {


isDragging.current = true;

startX.current = e.clientX || e.touches[0].clientX;

startY.current = e.clientY || e.touches[0].clientY;

startRotationX.current = earth_mesh_ref.current.rotation.x;

startRotationY.current = earth_mesh_ref.current.rotation.y;

};

const onPointerMove = (e) => {

if (!isDragging.current) return;

if (animating.current) return; 

const x = e.clientX || e.touches[0].clientX;

const y = e.clientY || e.touches[0].clientY;

const deltaX = x - startX.current;

const deltaY = y - startY.current;

earth_mesh_ref.current.rotation.y = startRotationY.current + deltaX * 0.005;

earth_mesh_ref.current.rotation.x = startRotationX.current + deltaY * 0.005;

earth_mesh_ref.current.rotation.x = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, earth_mesh_ref.current.rotation.x));

 };
```

and this is the code that i use to center the marker in camera

    const zoomIn = (marker) => {

        // in case user click another point when one was already clicked
        if (isDragging.current) return;

        isDragging.current = true;
        animating.current = true;

        const target = new THREE.Vector3();
        marker.getWorldPosition(target);
        
        // current marker in front of camera
        const targetDir = target.clone().normalize();
        
        // marker to go 
        const desiredDir = new THREE.Vector3(0, 0, 1);
    
        // rotation
        const deltaQuat = new THREE.Quaternion()
            .setFromUnitVectors(targetDir, desiredDir);
    
        const finalQuat = earth_mesh_ref.current.quaternion.clone()
            .premultiply(deltaQuat);
        
        gsap.to(earth_mesh_ref.current.quaternion, {
            x: finalQuat.x,
            y: finalQuat.y,
            z: finalQuat.z,
            w: finalQuat.w,
            delay: 2,
            duration: 1.5,
            ease: "power3.inOut",
            onUpdate: () => {
                earth_mesh_ref.current.quaternion.normalize();
            },
            onComplete: () => {
                // back to eauler
                const euler = new THREE.Euler().setFromQuaternion(
                    earth_mesh_ref.current.quaternion, 'YX'
                );
                startRotationX.current = euler.x;
                startRotationY.current = euler.y;
                isDragging.current = false;
                animating.current = false;
                prev_quaternion.current = true;
            }
        });
     
        target_z.current = 1.5;
   
    }