How To create a multi Level Dropdown NavBar in React-bootstrap using Map?

I needed some help spawning multi-level dropdowns in the React-bootstrap navbar with Maps.

I have a constant.js file that contains all the data that I want to dynamically populate in the NavBar dropdown

export const navLinks = [
{
    id: "transactions",
    title: "Transactions",
    children: [
        {
            id: 'transactions/LotAssignment',
            title: 'Lot Assignment Maintenance',
            component: <LotAssignmentMaintenance />
        },
        {
            id: 'transactions/ShopOrder',
            title: 'Shop Order Maintenance',
            children: [
                {
                    id: 'shopOrder/Print',
                    title: 'Shop Order Print',
                    component: <ShopPrint />
                },
            ]
        },
        {
            id: 'transactions/Lot',
            title: 'Lot Maintenance',
            component: <LotMaintenance />
        }
    ]
},
  ];

Notice that it still has children data inside the children, which I want to output into a multi-level dropdown

and then, I have the below component called Navigation.jsx which I use Map to create the Navbar dropdown

import React from "react";
import { Navbar, Nav, Container, NavDropdown } from "react-bootstrap";
import { navLinks } from "../constants/index.js";
import { Route, Routes, Link, BrowserRouter } from "react-router-dom";

export const Navigation = () => {
  return (
    <BrowserRouter>
      <Navbar bg="dark" variant="dark" expand="lg">
        <Container>
          <Navbar.Brand as={Link} to="/"></Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="ms-auto">
              {navLinks.map((nav, index) => {
                if (!nav.children) {
                  return (
                    <Nav.Link as={Link} to={`${nav.id}`} key={nav.id}>
                      {nav.title}
                    </Nav.Link>
                  );
                } else if (nav.children) {
                  console.log(nav.children.child);
                  return (
                    <NavDropdown
                      key={nav.id}
                      title={nav.title}
                      id="basic-nav-dropdown"
                    >
                      {nav.children.map((dropdown, idx) => (
                        <NavDropdown.Item
                          key={dropdown.id}
                          as={Link}
                          to={`${dropdown.id}`}
                        >
                          {dropdown.title}
                        </NavDropdown.Item>
                      ))}
                    </NavDropdown>
                  );
                } else {
                }
              })}
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>

      <Routes>
        {navLinks.map((nav, index) => {
          if (!nav.children) {
            return <Route path={nav.id} element={nav.component} key={nav.id} />;
          } else {
            return nav.children.map((child, idx) => (
              <Route path={child.id} element={child.component} key={child.id} />
            ));
          }
        })}
      </Routes>
    </BrowserRouter>
  );
};

the code output is below

The problem is, for the part that still has children,
the dropdown is not created, the expected output is like below.

Thanks in Advance 🙂