I have an draggable div in a react app. When I enable dragging by using draggable={true}, I see a ghost image is created and it follows the mouse movement. I just wanted to get rid of it.

My actual component is the first one. The ghost image is the second one.

When I looked up for it, I found this stackoverflow solution. Implemented the following code snippet, and it cleared the old ghost.

let img = new Image();
img.src = empty; // this is just an empty png file

const onDragStartHandler = (event) => {
    event.dataTransfer.setDragImage(img,0,0)
    // ...
}

However, now I see a different animation for a fraction of a second at the very beginning of the drag operation. How can I remove that? Or is there a way to completely disable the dataTrasfer? Tried event.dataTransfer.clearData() but it did not worked out.