Preserving custom component item state while dragging

[Cheppa]

I am unsure if it's possible to accomplish what I'm trying to do in this codesandbox:

https://codesandbox.io/s/heuristic-breeze-osx1e

All items have their own toggle button that hides content inside the item. The toggled state is handled inside the Item component with useState hook.

When the content is hidden and the item is dragged, the content becomes visible in the dragged element. In the image, the "Toggleable stuff" should be hidden on the dragged item.

Is this possible? How can I preserve the toggled state in the dragged component without moving the state outside the items.

Thanks in advance for any help!

[tajo]

How can I preserve the toggled state in the dragged component without moving the state outside the items

You can't, the state needs to be outside of the dragged item. The dragged item is being re-mounted, that's why the internal state is lost.