react-dnd monitor.getItem() is always equal to hovered item

Question

In an attempt to make a 2d reorganizable list I have set up the following example.

https://codesandbox.io/s/wizardly-cerf-4zpkt?file=/src/DragableItem.js:696-746

However the hovered over component is always the component that is hovering. This means that there is no way to move anything, because it will always be put on itself. Is there a way to fix this?

To reproduce, drag any of the 9 boxes over any of the others.

Answer 1

There were two mistakes in the example codesandbox.

1. The first parameter of the hover method is the dragging item, not the hovered item.
2. The hovered item is the current item which is calling the useDrop. Another way to think about it is that the hovered item is calling the hover method of useDrop, so you already know the hovered item.

Here is the codesandbox with the corrections. https://codesandbox.io/s/blazing-browser-3h47r?file=/src/DragableItem.js