Javascript to dyanamically spawn bootsrap 5 Navbar <li> and <ul dropdown item>

I would like to ask for your help.

I store text to constant.js file example below.

export const navLinks = [
    {
      
      id: "manage",
      title: "Manage",
    },
    {
      id: "transactions",
      title: "Transactions",
    },
    {
      id: "report",
      title: "Report Maintenance",
    },
    {
        id: "support",
        title: "Support",
    },
    {
        id: "logout",
        title: "Logout",
    },
  ];

right now I was able to dynamically load a text to <li> tag to the navbar using below code. also using bootsrap 5.

<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
  {navLinks.map((nav, index) =>(
  <li class="nav-item" key="{nav.id}">
    <a class="nav-link active" aria-current="page" href="{`#${nav.id}`}">
      {nav.title}
    </a>
  </li>
  ))}
</ul>

what I want is for some <li> there will be a dropdown menu but not all,

for example, on Report Maintenance, there will be dropdown e.g(Admin Report, User Report) and on Manage the dropdown will be(Add User, Edit User).

Is there a way to add the dropdown text to constant.js and spawn it dynamically on the correct <li> tag?

Im expecting it to be like this.

You can add a children property to the items that has a dropdown in the constant.js like so:

export const navLinks = [
{
id: "manage",
title: "Manage",
},
{
id: "transactions",
title: "Transactions",
},
{
id: "report",
title: "Report Maintenance",
children: [
{
id: 'report/admin',
title: 'Admin Report',
},
{
id: 'report/user',
title: 'User Report'
}
]
},
{
id: "support",
title: "Support",
},
{
id: "logout",
title: "Logout",
},
];

Then use it like this

<ul class="navbar-nav ms-auto">
{navLinks.map((nav, index) => {
if (!nav.children) {
return (
<li class="nav-item" key={nav.id}>
<a class="nav-link active" href={`#${nav.id}`}>
{nav.title}
</a>
</li>
);
} else {
return (
<li class="nav-item dropdown" key={nav.id}>
<a class="nav-link active dropdown-toggle" href={`#${nav.id}`} data-bs-toggle="dropdown">
{nav.title}
</a>
<ul class="dropdown-menu dropdown-menu-dark">
{nav.children.map((dropdown, idx) => (
<li key={dropdown.id}>
<a class="dropdown-item" href={`#${dropdown.id}`}>
{dropdown.title}
</a>
</li>
))}
</ul>
</li>
);
}
})}
</ul>

Working example: https://codesandbox.io/s/thirsty-northcutt-vjbbt1?file=/src/App.js