Object movemet issue

[Mirzhal95]

I wanted to build virtual museum tour and I put a revolving-360-degree camera inside sphere and that sphere has textureof a certain museum room. So, what I wanted to achieve is that when a user just moves mouse pointer then camera should move to the direction of mouse pointer. So, I tried to move camera itself but I lost the control of OrbitControls, that is, I cannot rotate camera by click & drag. So, what I decided to do is to shake sphere itself by using useFrame() like this :

 const model = useRef();
 useFrame((state) => {
    // Left/right mouse movement rotates it a liitle for effect only
    model.current.rotation.y = state.mouse.x * 0.07;
    model.current.rotation.z = state.mouse.y * 0.07;
  });

return (
    <group ref={model}>
      <mesh>
        <sphereBufferGeometry attach="geometry" args={[500, 60, 40]} />
        <meshBasicMaterial
          attach="material"
          map={texture}
          side={THREE.BackSide}
        />
      </mesh>
</group>

So, the problem is when I run the project and move mouse up down left right then the sphere rotates ok. BUT if I click and drag mouse pointer then camera itself rotates but then on mouse move sphere shakes weirdly. I just want to ensure that z axis is always at the centre of camera so that whenever a user moves a mousepointer, sphere shakes corrctly