Can't get MultipleContainers to work when containers and items are stored in separate components

[dangzan]

All the examples of sortable containers holding sortable items that I've seen have the items and containers state in the same component (see https://github.com/clauderic/dnd-kit/blob/master/stories/2%20-%20Presets/Sortable/MultipleContainers.tsx).

But I can't have the items in the same component that has the containers. That's because each container fetches its own items from an API and stores them in the container's state. The containers do not know the contents of the sibling containers. So when I start dragging an item to another container and drop it, the drag event contains no information about that container.

I have started to try to solve this problem using Context thinking that I need a way to share container state across sibling containers, but I'm not sure if that's necessary or the right thing to do. Here is an example I made: https://codesandbox.io/s/brave-resonance-5yf61i.

How do I make each container aware of their sibling containers such that the drag event identifies which sibling container the item was dropped over?