To give you the context, I built a dashboard with a material-ui grid with 3 different sizes of widgets (small, medium and large). The widgets are not drag and drop and to move the widgets you have to go to another page of the application which is not very UX design. I've never dragged and dropped with react and I'm wondering if there is an easy way to make my material-ui drag and drop grid. I would like to have some suggestions, examples if you have thank you in advance for your help.
For information I saw that there were several libraries (react-beautiful-dnd, dnd-kit)
Here is what I have tried with dnd-kit but I cannot make my grid easily drag and drop : https://codesandbox.io/s/dndkit-material-ui-grid-sample-ck6l3?file=/src/App.js
