How can i create a dynamic nested accordion in React

How i can create an accordion like this

-parent
   -subparent1
      -subparent2
        ...
          -subparentN
             - child

Here is my data.

//parents
{id: 1, name: "", parent_id: null}
{id: 2, name: "", parent_id: null }
{id: 3, name: "", parent_id: null }
{id: 4, name: "", parent_id: null}

//children
{id: 5, name: "", parent_id: 1}
{id: 6, name: "", parent_id: 1}
{id: 7, name: "", parent_id: 5}
{id: 8, name: "", parent_id: 5}
{id: 9, name: "", parent_id: 6}
{id: 10, name: "", parent_id: 6}
{id: 11, name: "", parent_id: 6}
{id: 12, name: "", parent_id: 6}
{id: 13,name: "", parent_id: 6}
{id: 14, name: "", parent_id: 6}

Basically the ones who have parent_id:null are parents, and when I click on them I want their potential children to be displayed if they have any, now this isn’t that hard, but what I can’t understand is how to display subparent’s children

I found an answer

for (const item of catalog) {
                // Find the parent object
                const parent = catalog.find(({ id }) => id === item.parent_id);
                // If the parent is found add the object to its children array
                if (parent) {
                    parent.children = parent.children
                        ? [...parent.children, item]
                        : [item];
                }
            }
            const list = catalog.filter(({ parent_id }) => !parent_id);
}

Now i don’t know how to make it clickable :frowning: