Get notified of camera position change via useThree() hook

[romankoho]

Hello,

I'm pretty new to threejs and react-three-fiber. I want trigger code whenever the camera position changes (especially when the "zoom" is changed with the mouse wheel). I'm using OrbitControls and a PerspectiveCamera.

Why is the useEffect not beiing triggered?

const CameraListener = (): JSX.Element => {
  const {camera} = useThree()

  useEffect(() => {
    //why is this effect not triggering when I pan or zoom the camera?
    console.log('camera position changed to: ', camera.position)
  }, [camera.position.x, camera.position.y, camera.position.z])

  return(
    <Circle
    name={'polygonPlane'}
    args={[1, 50]}
  >
    <meshStandardMaterial color={'green'} side={DoubleSide} />
  </Circle>
  )
}

see Sandbox for full example:
https://codesandbox.io/p/sandbox/dreamy-proskuriakova-s3v9c6

thanks!