[experimental] useSortable breaks when dragging subitems from one group to another

I've been trying to recreate a drag and drop solution with nested sortable items.

The data is in a nested structure, with items and subitems.

```json
[
{
"id": "1",
"name": "Item 1",
"data": [
{ "id": "3", "name": "Subitem 1" },
{ "id": "4", "name": "Subitem 2" }
]
},
{
"id": "2",
"name": "Item 2",
"data": [
{ "id": "5", "name": "Subitem 3" },
{ "id": "6", "name": "Subitem 4" }
]
}
]

```

Each time the list is re-sorted, I want to save the new order in `useState`.

## Reproduction

https://codesandbox.io/p/sandbox/7zl6wj

Sorting items works. Sorting subitems within an item works, but dragging a subitem to another item breaks react with the error message `Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.` in Webpack and `NotFoundError: The object can not be found here.` in Vite.

---

I can see that in the guide for [Multiple sortable lists](https://next.dndkit.com/react/guides/multiple-sortable-lists) reordering is done with a separate index array state. This could probably work, but I feel like my use-case is pretty common.

Furthermore, in production mode this all seems to work. I think that if there was a way to suppress this error things would be fine.

I've tried using `preventDefault` on onDragOver, but this loses a lot of the benefit to having the library handle sorting.