```
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）を使用して設定します。
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;

In this code, we define a functional component BallFollowingMouse that uses the React useState hook to manage the position of the ball. We create a handleMouseMove function that updates the state with the current mouse position whenever the mouse moves.

In the component's return statement, we render a container div with position: relative and overflow: hidden styles to constrain the ball's movement to the container. Inside this container, we render a div element for the ball itself. We set the ball's position using the state values and the same calculation as in the original code: top: position.y - 25 and left: position.x - 25.