I am using react-dnd to implement drag and drop functionality in my code. The problem I am facing is that if I wrap my draggable components inside a Menu component. the drop functionality doesn't work while the drag works, but if I replace the Menu with a div, it works as expected.
Here's a Sandbox where the issue is demonstrated.
I have created a Dummy component which is essentially the Knight component and passed it in a mui Menu in Board.tsx. On opening the menu, the component is draggable as expected but not droppable.
Checkout to without-mui-menu branch, where I have replaced the whole menu thing with a div and it works as expected.
I went through react-dnd docs, and I just need to ensure there's a dnd-provider wrapped at the top level for it work, which I have done.
Does anybody have an idea what could be the issue?