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

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;

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;