I'm currently trying to build a trello-like application with lists and tasks. I wanted to incorporate drag n drop functionality so I added the dndkit library. I've managed to make the tasks sortable between the lists, and I would like to make the lists sortable aswell. However when I try to nest DndContext and SortableContext the application sometimes enters a weird recursive re-render loop and throws the following error repeatedly:
`Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.`
The application then proceeds adds an undefined task into the data and fails when it maps over the data to re-render. I've tried logging to see where the error might be but I was only able to figure out the addition of the undefined, not the source of it or the re-render loop.
Here is the current code I have, and here the repo with both branches.
Here is a video demonstrating the issue: https://imgur.com/a/HzRCK9B