如何使用React 17获取div (而不是其子对象)的鼠标事件的鼠标X位置？

import React, { useRef, useEffect, useState } from 'react';

const MyComponent = () => {
  const divRef = useRef(null);
  const [mouseX, setMouseX] = useState(0);

  useEffect(() => {
    const handleMouseMovement = (event) => {
      const { clientX } = event;
      setMouseX(clientX);
    };

    const divElement = divRef.current;
    if (divElement) {
      divElement.addEventListener('mousemove', handleMouseMovement);
    }

    return () => {
      if (divElement) {
        divElement.removeEventListener('mousemove', handleMouseMovement);
      }
    };
  }, []);

  return (
    <div ref={divRef}>
      <p>鼠标X位置: {mouseX}</p>
    </div>
  );
};

export default MyComponent;