It's been a while so I will like to update my findings. There are limitations to Nested Drag n Drop in React-Beautiful-DND. We cannot drag and drop in a nested hierarchy of child and parent, while implementing this feature i have come across many articles and found that React- beautiful-DND does not support this feature but you can achieve this: https://codesandbox.io/p/sandbox/5v2yvpjn7n?file=%2Findex.js

see more for reported bugs in react-beautiful-dnd: https://github.com/atlassian/react-beautiful-dnd/issues/293

A parent cannot be dragged into another parent's child list or a child cannot be dragged out of the parent to be on the same level as the parent also one child cannot be dragged to another parent's child hierarchy

I found an alternative method to achieve this child and parent drag-and-drop feature by simply using the react-dnd package. This package does not have limitations to achieve this feature