Javascript to dynamically spawn Bootstrap 5 Navbar list items and dropdown list

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 list item elements to the navbar using below code. also using Bootstrap 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?

I'm 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