Is there a way to create a sortable tree with react-sortable-hoc or react-beautiful-dnd?

I'm trying to create a tree of lists where I can reorder the list and also drag elements inside other elements and not only above and ender other elements.
* but the problem is when I use ` react-sortable-hoc` or `react-beautiful-dnd` I can only reorder the list of elements but I have no idea how to drag elements on another element to make them a child and parent elements.
* In the following example you can I have an element with sub.
```
const rows = [
{ text: "Jhon" },
{ text: "alex" },
{ sub: [{ text: "first" }, { text: "second" }] }
];
```
* in this code and box thing can be more clear where I have a tree with draggable elements.
[codeSandBox](https://codesandbox.io/s/pensive-montalcini-7cp8b?file=/src/App.js:0-1355)