React JSXでこれを機能的に書き直すことができますか？
```
import React, { useState } from "react";

function BallFollowingMouse() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  function handleMouseMove(event) {
    setPosition({ x: event.clientX, y: event.clientY });
  }

  return (
    <div
      style={{
        position: "relative",
        width: "100%",
        height: "100%",
        overflow: "hidden",
      }}
      onMouseMove={handleMouseMove}
    >
      <div
        style={{
          width: "50px",
          height: "50px",
          borderRadius: "50%",
          backgroundColor: "red",
          position: "absolute",
          top: position.y - 25,
          left: position.x - 25,
        }}
      />
    </div>
  );
}
```

export default BallFollowingMouse；

このコードでは、ボールの位置を管理するためにReact useStateフックを使用する機能コンポーネントBallFollowingMouseを定義している。マウスが動くたびに、現在のマウス位置で状態を更新するhandleMouseMove関数を作成します。

コンポーネントの return 文で、コンテナ div を position: relative と overflow: hidden のスタイルでレンダリングして、ボールの動きをコンテナに拘束します。このコンテナの中に、ボール自体の div 要素をレンダリングします。ボールの位置は、ステート値と元のコードと同じ計算（top: position.y - 25、left: position.x - 25）を使用して設定します。