How to move data between two <SortableContext>?

[lironbenjamin]

I am attempting to make a recursively nested sorted list that can transfer sortables between <SortableContexts> nested at different levels (similar to the Multiple Containers examples, but with containers being able to be nested within containers).

However, I am not able to figure out what allows items from one <SortableContext> to be able to be moved to another. When I setting up even a basic example like below, sorted items only drag within their sortable context and I cannot move items from one to another, like the example. Am I missing something obvious in the documentation/in the Multiple Containers example?

// example data
const [items, setItems] = useState([{id: 1, label: "one"}, {id: 2, label: "two"}, {id: 3, label: "three"}]);
const [itemsTwo, setItemsTwo] = useState([{id: 4, label: "four"}, {id: 5, label: "five"}, {id: 6, label: "six"}]);

// within the functional component
<DndContext 
  sensors={sensors}
  collisionDetection={closestCenter}
  onDragEnd={handleDragEnd}
>
  <SortableContext 
    items={items}
    strategy={verticalListSortingStrategy}
  >
    {items.map(id => <SortableItem key={id.id} id={id.id} content={id.label} />)}
  </SortableContext>
  <SortableContext 
  items={itemsTwo}
  strategy={verticalListSortingStrategy}
  >
    {itemsTwo.map(id => <SortableItem key={id.id} id={id.id} content={id.label} />)}
  </SortableContext>
</DndContext>

SortableItem.js

export function SortableItem(props) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
  } = useSortable({id: props.id});

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  }

  return (
    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
      <Text>{props.content}</Text>
    </div>
  )
}

[pstrassmann]

You’ll need update the contents of each “items” array onDragOver. For example when an item of one array is “over” an item of the other array, you’ll want to remove the item from the first array and add that item to the second array.