canvas' mouse move event's clientX is not 0 on left side

[amdreallyfast]

For my personal project, I'm using Vite with the react framework and react three fiber trying to create a canvas in a portion of the page. I expected the mouse move event's clientX to be 0 on the far left edge of the canvas, but it isn't. It seems to be following the window's screen position instead of the canvas'.

Here's a screenshot. Notice how the event's clientX as printed to the console (lower right) is still >300 at the far left edge of the canvas.
Note: Cursor does not appear in screenshot, but I circled where it was.

Packages:

"vite": "^4.4.5"
"three": "^0.156.1",
"@react-three/fiber": "^8.14.1",

Code (App.jsx):
Note: I'm using tailwindcss for the style.

import { Canvas } from '@react-three/fiber'
import './App.css'

function GlobeSection() {
  const onMouseMoveCanvas = (e) => {
    console.log({
      x: e.clientX,
      y: e.clientY
    })
  }

  return (
    <>
      <div className="w-full h-full bg-blue-950 border-4 border-red-500">
        <Canvas onMouseMove={(e) => onMouseMoveCanvas(e)}>

        </Canvas>
      </div>
    </>
  )
}

function App() {
  return (
    <>
      <div className='grid grid-rows-5 grid-cols-10 w-screen h-screen bg-black border-4 border-yellow-500'>
        <div className='row-span-4 col-span-2 border-2 border-red-500 text-white'>
          Search section
        </div>
        <div className='row-span-4 col-span-6 border-2 border-amber-500 text-white'>
          <GlobeSection />
        </div>
        <div className='row-span-4 col-span-2 border-2 border-emerald-500 text-white'>
          Details section
        </div>
        <div className='row-span-1 col-span-12 border-2 border-fuchsia-500 text-white'>
          Timeline section
        </div>
      </div>
    </>
  )
}

export default App

Why is the canvas' mouse move event's clientX not 0 on the far left of the canvas?
Note: I haven't experimented with clientY yet because it's not a problem as long as the canvas' top edge == top of window.

[amdreallyfast]

Use case:

I'm trying to calculate normalized mouse coordinates for the raycaster so that I can determine what object the mouse is hovering over.

[burgeeblue]

I'm attempting to compute normalized mouse coordinates rainbow obby for the raycaster in order to determine what object the mouse is hovering over.