Issue with Sorting Items in Flex-Wrap Container Using DndKit's rectSortingStrategy and closestCenter Collision Detection

[Konstantinacc]

I encounter an issue when sorting elements within a div that uses the flex-wrap class. I am utilizing rectSortingStrategy in strategy property of SortableContextand closestCenter in collisionDetection property of DndContext.

The relevant code can be found here for reference.

The issue arises when attempting to drag the "Age" element next to the space of the "Telephone Number" element. Instead of being placed after "Telephone Number", it is positioned before it. To achieve the intended behavior, the "Age" item needs to be placed in front of the "Description" item, after which it will display correctly next to "Telephone Number".

A similar issue occurs when attempting to move the "Name" element to the end of the list, after the "Information" item.

Any assistance or guidance on resolving this issue would be greatly appreciated.