Render nested items based on an API response using materialsUI - recursion

Question

im trying to make a nested side menu using nexJS and materialsUI dinamically based on an API response that would look like this:
const Response1 = [
{
id: 1,
name: "Logistics",
icon: "warehouse",
url: "/",
children: [
{
id: 2,
name: "Express",
icon: "precision_manufacturing",
url: "/",
children: [
{
id: 3,
name: "request",
icon: "list_alt",
url: "/Logistica/Express-Cedis",
children: [],
},
],
},
{
id: 5,
name: "Dashboards",
icon: "bar_chart",
url: "/Logistica/Dashboard",
children: [],
},
],
}
]
I was able to iterate the object and get all the items and display them, the only problem is that the ones that are childs should be visible only when clicking the parent, and i only have them all in a list statically, i did this with a code like this:
const mapStructure = (nodes: any) => {
if (nodes) {
return nodes.map((node) => (
<>
<ListItemButton onClick={handleClick}>
<ListItemIcon>
<Icon>{node.icon}</Icon>
</ListItemIcon>
<ListItemText primary={node.name} />
{open ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>
{mapStructure(node.children)}
</>
));
}
};
the idea is that the parent objects display just as the code above, but the children elements display in a collapse like the one below:
<Collapse in={open} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
<ListItemButton sx={{ pl: 4 }}>
<ListItemIcon>
<Icon>{node.icon}</Icon>
</ListItemIcon>
<ListItemText primary={node.name} />
</ListItemButton>
</List>
</Collapse>
i tried something like "if node has a child, render like the first example, and when it doesn´t have childs render like the second examle" but i can´t manage to write it correctly