How to convert React-Draggable coordinates into Element.getBoundingClientRect()?

[tetron432]

I noticed that the x and y coordinates that React-Draggable gives out is completely different from what getBoundingClientRect gives out. Here's a snippet of my code:

const [position, setPosition] = useState({ x: 0, y: 0 });
const trackPos = (data) => {
     setPosition({ x: data.x, y: data.y });
};

<Draggable onDrag={(e, data) => trackPos(data)}>
     <div ref = {ref}>...</div>
</Draggable>

When I print out the values of both ref.getBoundingClientRect() from the component and that of data are completely different. Is there any way to convert these values?

[okramovic]

i'd like to understand what do x and y in data stand for. does it depend on handle prop we pass to Draggable? does it depend on position prop?