Draggable does not work as intended in 4.4.6. (Normal operation in 4.4.5)

[Lee-Minhoon]

trafficstars

In version 4.4.6, the mouse leaves the draggable component.

When not to use state

import { useRef } from "react";
import Draggable from "react-draggable";
import "./App.css";

function App() {
  const nodeRef = useRef<HTMLDivElement>(null);

  return (
    <Draggable handle={`.handler`} nodeRef={nodeRef}>
      <div ref={nodeRef} style={{ width: "500px" }}>
        <div className="handler" style={{ backgroundColor: "gray" }}>
          React Draggable 4.4.6
        </div>
        <div>Body</div>
      </div>
    </Draggable>
  );
}

export default App;

4.4.6 https://github.com/react-grid-layout/react-draggable/assets/59780565/3594f5b5-9b4e-4659-aefd-6a5f60205037

4.4.5 https://github.com/react-grid-layout/react-draggable/assets/59780565/b7e8384d-1707-4f68-ad00-cc71affd61f0

When to use states

import { useCallback, useRef, useState } from "react";
import Draggable, { DraggableData, DraggableEvent } from "react-draggable";
import "./App.css";

function App() {
  const nodeRef = useRef<HTMLDivElement>(null);
  const [position, setPosition] = useState({ x: 0, y: 0 });

  const handleDrag = useCallback((e: DraggableEvent, data: DraggableData) => {
    setPosition({ x: data.x, y: data.y });
    console.log(data);
  }, []);

  return (
    <Draggable
      handle={`.handler`}
      nodeRef={nodeRef}
      position={position}
      onDrag={handleDrag}
    >
      <div ref={nodeRef} style={{ width: "500px" }}>
        <div className="handler" style={{ backgroundColor: "gray" }}>
          React Draggable 4.4.6
        </div>
        <div>Body</div>
      </div>
    </Draggable>
  );
}

export default App;

4.4.6 with console log https://github.com/react-grid-layout/react-draggable/assets/59780565/a41c47d3-7793-4c68-bae1-f043297eaa22

4.4.5 with console log https://github.com/react-grid-layout/react-draggable/assets/59780565/04ce9bb2-1aab-43a8-84ff-aea73a704178