Delay in isDraggingOver State Update When Dragging Between Droppable Components

[kang5647]

Similar to issues #821 and #804

Expected behavior

When dragging a file item over a folder (represented as a Droppable), the isDraggingOver state should update immediately to visually highlight the folder being hovered over. The dragged file should also drop into the correct folder when released.

Actual behavior

There is a noticeable delay in the isDraggingOver state updating when dragging files from top-to-bottom over folders, but not when dragging from bottom-to-top. Specifically:

1. I start dragging a file from a folder (e.g., cell 1) down towards another folder (e.g., cell 2).
2. When hovering over cell 2, the isDraggingOver state does not immediately update, only updating after nearly reaching cell 3.
3. This delay results in files sometimes dropping into the previous folder (cell 1) instead of the intended target (cell 2), creating unexpected behavior and incorrect file placement.
4. This issue affects the user experience by slowing visual feedback for the current folder being hovered over and causes logic errors in the drag-and-drop process.

Steps to reproduce

1. Set up a DragDropContext wrapping a list of items where each item is a Draggable.
2. Define folders as Droppable components nested inside Draggable items, with each folder able to accept dragged items.
3. Drag a file item from a folder at the top of the list (e.g., cell 1) downwards towards folders below (e.g., cell 2, then cell 3).
4. Observe the delay in the isDraggingOver state update as you move over each folder.
5. Try dragging from a folder lower in the list (e.g., cell 3) upwards to cell 2, and note that the delay issue does not occur.

Suggested solution?

Not at the moment

What version of React are you using?

18.2.0

What version of @hello-pangea/dnd are you running?

17.0.0

What browser are you using?

Chrome

Demo