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

[tetron432]

trafficstars

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?