I am building a chessboard and trying to move the pieces using the HTML5 Drag and Drop API. However, whenever I move a piece, a box appears under the cursor which completely ruins the aesthetic feel (see picture). Note: I am using react-dnd if that changes anything.
I did some reading and I believe this shows up because of the dropEffect property (https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/dropEffect).
I have looked at a bunch of other stackoverflow posts but I can't find anywhere how to completely disable this effect from happening.
So... is there some way to get rid of the box from appearing underneath the cursor when I'm dragging?
I have looked at chess.com and lichess.org and neither show that box when you drag a piece, so I know it's possible. Thanks!