Adding drag and drop to a React todo app

When I was building my React todo app, I wanted to add drag and drop functionality to the todo items. I had a look at the HTML5 drag and drop API and played around learning how it works using vanilla JS. I implemented some basic drag and drop functionality which you can see in the HTML5 drag and drop functionality blog post.

It works fine and with the help of ChatGPT I quickly converted it into my React todo app. However the translation from the vanilla JS to React felt too literal. obliged me to jump out of state management and use useRef to access the DOM elements after they had switched positions in order to update the state again. After further reading, I understand this can be frowned upon. Whilst there is apparently an argument