Variable sized table rows positioned incorrectly

[PawelGIX]

When sorting a table with different sized rows, they are not positioned correctly. It seems that their dimension is not read correctly.

Example: https://codesandbox.io/s/dnd-kit-vertical-variable-height-removable-draggable-forked-q3i1f8?file=/src/SortableItem.js

Is it possible that

strategy={verticalListSortingStrategy}

is required to correctly calculate the size of the table's rows?

[CodeSmith32]

Yes, it would appear that settings strategy to verticalListSortingStrategy on the <SortableContext> component fixes this glitch:

<SortableContext strategy={verticalListSortingStrategy}>
   {/* ... */}
</SortableContext>

For those using variable height draggables, also be sure to use CSS.Translate.toString and NOT CSS.Transform.toString when styling the sortable elements (see this issue). Otherwise the elements stretch obscenely.