I am having a list of layers (sort of like in photoshop) and I need the layers to be able to combine and create a group. I know react-beautiful-dnd does not support nesting and dragging from parent to child and vice versa so I would like to keep flat structure, give the parent object an array of children ids and move it around mimicking the nested structure.
I am however stuck with making it work technically. In my code-sandbox I have a data structure that I have in the application, I am able to move the layers around, but I don't know how to achieve the functionality of parent-child relationship when I move the layers. So if I move layer above parent, if becomes normal layer, if it goes inside, it's a children layer.
Also the original order of the data so the children are following parent in the structure.
Here is my simplified code https://codesandbox.io/s/282le