How to make model look after cursor even after exiting canvas

Questions
1

I’m new to Three.js and I tried making a model look at the cursor. After the cursor exits the canvas the model doesn’t move anymore.

function Rig() {
const { camera, mouse } = useThree();
const vec = new Vector3();

return useFrame(() => {
  camera.position.lerp(vec.set(mouse.x, mouse.y, camera.position.z), 0.05);
  camera.lookAt(0, 0, 0);
});

return (
<div className="mt-20 flex items-center justify-center">
  <Canvas
    style={{ width: "500px", height: "400px" }}
    camera={{ position: [0, 0, 6] }}
  >
    <Suspense fallback={null}>
      <Scene scale={1.5} />
    </Suspense>
    <Rig />
  </Canvas>
</div>
);

I’ve tried different variants but nothing seems to work.

2

I’m not a react person, but have you tried setPointerCapture?