Draggable Component "runs away"/is offset from the cursor

[tygthomas0]

trafficstars

I have two Draggable headers overlaid on an image, all of which is inside of a div. The user has the ability to move the text around on top of the image, and then save their text/image to a list that is displayed below the original (a rudimentary "meme generator" I made for a course). When the user drags the text, the text appears to run away from the cursor, but when the user saves the image, the text is placed where the user dragged the cursor to, not where the text ended up.

For example, if I drag the cursor a quarter of the way down the image, the text appears to be halfway down the image, but the saved version will have the text a quarter of the way down, where the cursor was.

The positions are being stored in state through a handlechange-type function, which is then passed down to a child component for the purposes of being displayed below the generator. As far as I can tell, my code for saving the position and such is correct, but I am having this problem nonetheless. My CSS doesn't have any transform properties in it which I have read can cause problems.