I am using react-beautiful-dnd to handle drag and drop operations in my application. I allow users to have youtube videos, and let them reorder them. I've extracted the logic to this codesandbox
All code: https://codesandbox.io/s/using-react-beautiful-dnd-with-hooks-forked-9nd6ky?file=/src/index.js
App alone: https://9nd6ky.csb.app/
You can see the problem in the gif, the videos reload when dropped. When video A is dragged (and dropped) BELOW video B, A rerenders, and when video C has video D dragged and dropped above it, C rerenders.
I've tried using react.memo to prevent the rerender but it doesn't seem to be working. Perhaps the rerender is different from the reload?
Thanks for your help!
Here is a gif of it happening (not enough reputation to add to the post :( https://i.stack.imgur.com/Maok6.gif)