How to create MUI Sidebar of nested list items with multiple map functions?

I am trying to create a second sidebard of nested list items in a react app with MUI, however finding difficulties to map the data. The approach I am trying is to have a map fuction for the child items within a parent map higher order function in the react component. Could someone please help me to get into a solution.

Heres what I am trying to achive:

Screenshot of the prototype

Complete screen image

Here's the Data for list:

    {
        "_id": "6384adf3e445385733eed839",
        "accountName": "WestStar Labs",
        "accountType": "Facility",
        "providers": []
    },
    {
        "_id": "6351e49a7074da08f5ea17f2",
        "accountName": "Discover Labs 123",
        "accountType": "Group",
        "providers": [
            {
                "_id": "6351e5087074da08f5ea1803",
                "providerName": "Helen Manuel",
                "providerNPI": 1234567890,
                "accountType": "Provider"
            }
        ]
    },

    {
        "_id": "635450821a48fcc3c19558b7",
        "accountName": "New Account 005",
        "accountType": "Group",
        "providers": [
            {
                "_id": "6354508f1a48fcc3c19558ba",
                "providerName": "Dr Helen Sloane",
                "providerNPI": 123456789,
                "accountType": "Provider"
            }
        ]
    },

    {
        "_id": "6384d11809949f49ada17801",
        "accountName": "Discover Lab 123",
        "accountType": "Facility",
        "providers": []
    },
    {
        "_id": "638518b3f010e7da6f157eff",
        "accountName": "AirBioHealth 1",
        "accountType": "Group",
        "providers": []
    }
]

As you see in the data if the accountType is Group then I would need list its child items.

Here's the React code:

import Box from '@mui/material/Box';
import List from '@mui/mate开发者_Python百科rial/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Divider from '@mui/material/Divider';
import CorporateFareIcon from '@mui/icons-material/CorporateFare';import DraftsIcon from '@mui/icons-material/Drafts';
import { FixedSizeList } from 'react-window';
import LocalHospitalIcon from '@mui/icons-material/LocalHospital';
import Person2RoundedIcon from '@mui/icons-material/Person2Rounded';

import { useSelector, useDispatch } from 'react-redux'



const AccountsSideBar = () => {

    const { accounts } = useSelector((state) => state.accountsList)


  return (
    <div>



<Box sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper', padding: 0 }}
      style={{maxHeight: 600, overflow: 'auto'}}>
      <nav aria-label="main mailbox folders">
        <List style={{maxHeight: '100%', overflow: 'auto'}}>

            {
            accounts.map((account) => (

              
               <ListItem disablePadding>
                <ListItemButton>
                  <ListItemIcon>
                    {account.accountType === 'Facility' ? <CorporateFareIcon color="primary" /> : <LocalHospitalIcon color="primary"/> }
                  </ListItemIcon>
                  <ListItemText  
                  primaryTypographyProps={{fontSize: '12px',}}
                  > {account.accountName} </ListItemText>
                </ListItemButton>
              </ListItem>

            ))}

        </List>
      </nav>
      <Divider />

    </Box>
      
    </div>
  )
}

export default AccountsSideBar

Thanks a bunch in advance :)