使元素（徽标）根据鼠标位置移动

问：

我正在尝试从这个网站复制标题徽标悬停的东西：https://minhpham.design/

我怎样才能在 React 中做到这一点？

这是我试图做的：

  const [mousePosition, setMousePosition] = useState({ x: 0.003, y: 0.003 });
  const [isFirstTime, setIsFirstTime] = useState(true);

  const handleMouseMove = (e: React.MouseEvent) => {
    var xPos: number = e.clientX - 55;
    var yPos: number = e.clientY - 55;

    xPos = Math.min(Math.max(xPos, -15), 15)
    yPos = Math.min(Math.max(yPos, -15), 15)

    setMousePosition({ x: xPos, y: yPos });
  };

  const handleFirstMove = () => {
    setIsFirstTime(false);
  };

  const handleMouseOut = () => {
    setIsFirstTime(true);
    setMousePosition({ x: 0, y: 0 });
  };

<a
  draggable="false"
  href="/"
  className="h-[5.93vmin] w-[5.93vmin] move-on-hover"
  onMouseEnter={handleFirstMove}
  onMouseMove={handleMouseMove}
  onMouseOut={handleMouseOut}
  style={{ transform: `translate(${mousePosition.x}%, ${mousePosition.y}%)`, transition: isFirstTime ? "transform 200ms linear" : "none"}}
>
  <img draggable="false" src={icon} alt="icon" />
</a>