'How can I implement 'drag to select' in React?

I am new to React and would like to highlight single adjacent letters in a grid of letters by dragging over them (i.e. hovering over them but with the mouse clicked).

The final result should look and feel like this: https://lovattspuzzles.com/online-puzzles-competitions/play-daily-word-search-puzzle-online/

By using onDragEnter={() => {} on each of the letters, I am able to generate the desired effect; however, the dragged element is then clipped to my mouse (see following screenshot).

onDragEnter

Is there any method to not show the dragged element from the screenshot? Is there a better method to implement 'drag to select' in React?

Thank you very much for your help!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source