如何让canvas onmousemove处理程序查看最新的反应状态钩子值？

import React, { useState } from 'react';

const CanvasComponent = () => {
  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });

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

  // 在画布上实时显示最新的反应状态钩子值
  useEffect(() => {
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillText(`Mouse position: (${mousePos.x}, ${mousePos.y})`, 10, 10);
  }, [mousePos]);

  return <canvas id="canvas" width={800} height={600} onMouseMove={handleMouseMove} />;
};