REACT-Print child elements in th NavBar menu left side

I’m struggling to print my child elements with their icons in my NavBar menu (left side) but only all the parents are printed… And for those where children is true, I want to print a chevron next to the parent icon so we can click on it and see all the child elements.

Here is my code for the NavBar.jsx :

import './NavBar.css'
import logo from "../Components/logo";
import { ITEMS } from "../Navigation";
import React from 'react'

export default function NavBar() {
    return (
        <div className="NavBar">
            <img className="logo" /> 
            <span className="textLogo">LOGO</span>
            <div className ="NavbarList">
                {ITEMS.map((item, i) => {
                    return (
                        <li key={i} className="row" id={window.location.pathname === item.href ? "active" : ""} 
                        onClick={() => {window.location.pathname = item.href;}}>                      
                            <div id="icon">{item.icon}</div>
                            <div id="title">{item.title}</div>   
                        </li>
                    );
                    
                })}
             
            </div>
        </div>
    );
}

And my ITEMS (in Navigation.js) that are shown in the NavBar :

import ConstructionIcon from '@mui/icons-material/Construction';
import GridViewIcon from '@mui/icons-material/GridView';

    export const ITEMS = [
        {
            icon: <GridViewIcon />,
            title: 'Dashboard',
            href: '/dashboard',
            children: []
        },
        
        {
            icon: < ConstructionIcon/>,
            title: 'Setup',
            href: '/setup',
            children: [
                { title: 'About', href: '/about' },
                { title: 'Contact', href: '/contact' },
            ],
    
        },
    ]

Any ideas please ?