React Js Draggable Div Element

<!DOCTYPE html>
<html>

<body>
  <div id="app"></div>
  <script type="text/babel">
    const { useState } = React;

function App() {
      const [isDragging, setIsDragging] = useState(false);
      const [position, setPosition] = useState({ x: 10, y: 100 });
      const [initialPosition, setInitialPosition] = useState({ x: 0, y: 0 });

const handleMouseDown = (e) => {
        setIsDragging(true);
        setInitialPosition({
          x: e.clientX - position.x,
          y: e.clientY - position.y,
        });
      };

const handleMouseUp = () => {
        setIsDragging(false);
      };

const handleMouseMove = (e) => {
        if (!isDragging) return;

const x = e.clientX - initialPosition.x;
        const y = e.clientY - initialPosition.y;

setPosition({ x, y });
      };

return (
        <div className='container'>
          <h3>React Js Draggable Div Element </h3>
          <div
            className="draggable-div"
            onMouseDown={handleMouseDown}
            onMouseUp={handleMouseUp}
            onMouseMove={handleMouseMove}
            style={{
              position: 'absolute',
              left: position.x,
              top: position.y,
              cursor: isDragging ? 'grabbing' : 'grab',
            }}
          >
            Drag me!
          </div>
        </div>

);
    }

ReactDOM.render(<App />, document.getElementById("app"));
  </script>
  <style>
    body {
      margin: 0;
      font-size: 28px;
      font-family: Arial, Helvetica, sans-serif;
      height: 1000px;
    }

.draggable-div {
      width: 200px;
      height: 200px;
      background-color: lightblue;
      border: 1px solid #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
    }
  </style>
</body>

</html>