React how to better track mouse movement on raycaster

Question

I have a three js plane that is created in a useEffect in react, that uses raycasting on the mouse position to do effects and it works fine as long as it takes up the full screen, but if I scroll halfway down and put my mouse in the middle of the screen the effect still happens half way up the plane rather than where the mouse is. So even though the mouse is at the bottom of the plane, and in the middle of the screen it highlights the middle of the screen.

this is how im currently calculating mouse position

window.addEventListener('mousemove', (event) => {
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1
  })

and im calling the raycaster here.

requestAnimationFrame(animate)
    renderer.render(scene, camera)
    raycaster.setFromCamera(mouse, camera)

Answer 1

I found by getting the bounding rectangle and subtracting it it was able to give me the mouse position over the element rather than the screen itself

const section = document.getElementById("planeSection");

    section.addEventListener("mousemove", (event) => {
      var rect = container.getBoundingClientRect();
      mouse.x = ((event.clientX - rect.left) / window.innerWidth) * 2 - 1;
      mouse.y = -((event.clientY - rect.top) / window.innerHeight) * 2 + 1;
    });