How to make a dragged div land on the position it was dragged to, and how to remove the the "globe"-img on drag in html drag-and-drop

Question

https://codesandbox.io/s/react-drag-div-ddkfg9?file=/src/index.js

If you run the above codesandbox .. you'll see a div in the top left corner which is draggable. But when you drag this div, it:

1. always returns to top-left of the page on drag-end
2. there is a "globe" image that shows up beside the pointer while dragging

How do I:

1. make the div take the position it was dragged to?
2. show a cursor-grabbing type of cursor while drag is in progress?

Answer 1

Thanks to Yogi's comment, was able to get a proof-of-concept of drag-and-place in react working https://codesandbox.io/s/react-drag-div-forked-ymy3t7?file=/src/index.js