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.
spam fails_task lang_mismatch pii not_appropriate hate_speech sexual_content quality toxicity humor helpfulness creativity violence