如何在React中处理parent中的mouseMove事件？

// Parent组件
import React, { useState } from 'react';
import Child from './Child';

const Parent = () => {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

  const handleMouseMove = (event) => {
    const { clientX, clientY } = event;
    setMousePosition({ x: clientX, y: clientY });
  };

  return (
    <div onMouseMove={handleMouseMove}>
      <Child handleMouseMove={handleMouseMove} />
      <p>鼠标位置：{mousePosition.x}, {mousePosition.y}</p>
    </div>
  );
};

export default Parent;

// Child组件
import React from 'react';

const Child = ({ handleMouseMove }) => {
  return (
    <div onMouseMove={handleMouseMove}>
      子组件
    </div>
  );
};

export default Child;