I’m trying out R3F in React and rotating a capsule model using TransformControls (only on the Z-axis). I want to print the current rotation angle whenever it changes, but only the initial angle gets logged, and the updated angles don’t appear. What’s the issue?

function SidePageModel2_1() {

  const capsuleRef = useRef()

  useEffect(() => {
    if (capsuleRef.current) {
      const geometry = capsuleRef.current.geometry
      geometry.translate(0, -1, 0)

      const euler = new THREE.Euler(0, 0, Math.PI / 4, 'XYZ')
      capsuleRef.current.rotation.copy(euler)

      console.log(capsuleRef.current.rotation)
    }
  }, [])

  return (
    <>
      <mesh position={[0, 0, 0]}>
        <boxGeometry args={[6, 0.5, 1]} />
        <meshStandardMaterial color="white" />
      </mesh>

      <TransformControls
        mode="rotate"
        position={[0, -1.2, 0]}
        onMouseDown={() => (orbitRef.current.enabled = false)}
        onMouseUp={() => (orbitRef.current.enabled = true)}
        showX={false}
        showY={false}
      >
        <mesh ref={capsuleRef} position={[0, 0, 0]}>
          <capsuleGeometry args={[0.5, 2, 32, 100]} /> 
          <meshStandardMaterial color="blue" />
        </mesh>
      </TransformControls>
    </>
  )
}

enter image description here

I want to output the changing angles, like the one in the image.