How can i limit the rotation of an object

Questions
1

I’m using react three fiber so apologies if this isn’t appropriate but I figured this would be the best place to ask.

This is pretty much exactly what I’m trying to do (but with one object instead of multiple), where the object moves slightly in relation to the mouse: Mount transitions - CodeSandbox
The problem is the code is a bit too complicated for me to understand how he achieved this effect.

This is what i have so far
rotatingbox
I can get it to rotate in relation to the mouse but it just keeps rotating and never stops.

my code:

import { animated } from '@react-spring/three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import * as THREE from 'three'
import React, { useRef } from 'react'
import { Canvas, useFrame, useThree, extend } from '@react-three/fiber'

// ------- mouse position -------
let mousePos = new THREE.Vector2(0, 0)

// ------- controls -------
extend({ OrbitControls })

const Controls = () => {
  const { camera, gl } = useThree()
  const orbRef = useRef()

  useFrame(() => {
    orbRef.current.update()
  })

  return <orbitControls args={[camera, gl.domElement]} ref={orbRef} />
}

// ------- box object -------
function RotatingBox() {
  const myMesh = React.useRef()

  useFrame(() => {
    myMesh.current.rotation.x += mousePos.y
    myMesh.current.rotation.y += mousePos.x
  })

  return (
    <animated.mesh ref={myMesh}>
      <boxBufferGeometry />
      <meshPhongMaterial color='royalblue' />
    </animated.mesh>
  )
}

// ------- canvas -------
export default function MyWork() {
  return (
    <div className='w-[400px] h-[400px] shadow-xl ml-10'>
      <Canvas
        onMouseMove={(e) => {
          let x =
            e.clientX -
            e.target.getBoundingClientRect().left -
            e.target.getBoundingClientRect().width * 0.5
          let y =
            e.clientY -
            e.target.getBoundingClientRect().top -
            e.target.getBoundingClientRect().height * 0.5

          mousePos.x = x * 0.0001
          mousePos.y = y * 0.0001
          // console.log('x: ' + x + ' y: ' + y, mousePos.x, mousePos.y)
        }}
      >
        <Controls />
        <RotatingBox />
        <ambientLight intensity={0.1} />
        <directionalLight />
      </Canvas>
    </div>
  )
}

I’d be grateful for any advice or help !