My react-js project supports multiple platforms web, desktop, mobile and has a feature using drag and drop (DND) library. However, the drag and drop(DND) feature was never developed for mobile platforms.

Now, we need to support DND feature for the mobile platform as well.

For drag and drop, I am using the below npm packages:

1. react-dnd
2. react-dnd-html5-backend

To support the mobile platform, I am using react-dnd-touch-backend library

Problem: On the mobile platform, the item becomes invisible when it is being dragged. Please have a look at below gif.

I have followed, below blog step by step and visited a couple of other blogs but all have same problem. https://medium.com/litslink/react-dnd-in-examples-ce509b25839d

If I use react-beautiful-dnd then everything works fine and the item is visible during drag but I can not use any other library except react-dnd because it is already being used in the project and having multiple libs for the same work is not an ideal approach.

Another reason of not using react-beautiful-dnd is that Atlassian company has put this lib to end of life mode and all feature improvements are stopped.

Please help me out to fix the invisible item problem during drag in react-dnd library or let me know if I am missing something.