Create a directory tree component in react

I am working on a music player using electron and decided to give react a try, but I am stuck on creating a directory tree.

I'm using readdirp to get all directories recursively, but I have no idea how to build the tree; readdirp creates an array of objects with the following properties:

// dir.fullPath      :  'D:/Music/Artist/Album/name',
// dir.fullParentDir :  'D:/Music/Artist/Album',
// dir.path          :  'Artist/Album/name',
// dir.parentDir     :  'Artist/Album',
// dir.name          :  'name',

Tree structure:

D:/Music/Artist1
D:/Music/Artist1/Album1
D:/Music/Artist1/Album1/cd1
D:/Music/Artist1/Album1/cd2
D:/Music/Artist1/Album2
D:/Music/Artist2
D:/Music/Artist2/Album1
D:/Music/Artist2/Album2

With vanilla JS I loop over the array:

On the 1st iteration I create an element with id=D:/Music/Artist1 (dir.fullPath), I search for an element with id=D:/Music/ (dir.fullParentDir ), it doesn't exist so I add the element to a default element.

2nd iteration I create an element with id=D:/Music/Artist1/Album1, I search for an element with id=D:/Music/Artist1, it exists so I add it the the found element.

This gives me the correct nesting.

<div id="default">
    <div id="D:/Music/Artist1">
        <div id="D:/Music/Artist1/Album1">
              <div id="D:/Music/Artist1/Album1/cd1"></div>
              <div id="D:/Music/Artist1/Album1/cd2"></div>
        </div>
        <div id="D:/Music/Artist1/Album2"></div>
    </div>
    <div id="D:/Music/Artist2">
        <div id="D:/Music/Artist2/Album1"></div>
        <div id="D:/Music/Artist2/Album2"></div>
    </div>
</div>

How can I achieve the same in react?

Edit

Here (https://imgur.com/a/hS1pe) is the array of objects returned by readdirp, object 1 is the parent dir of object 17 and object 18.

The nesting can be bigger than 1 level (updated the examples above).