thank your for reading.

I have a problem and a question.
I use Material-Tailwind navbar and a menu with submenu, and this is working perfectly.

And the problem comes when I want to create a several submenu dropown from the menu. The submenu trigger with props from Menu using open and handler using the useState and selected props from ListItem (see the code below).

My nav is displayed from mapping an array. My question is, how do we create a dynamic useState for triggering the other submenu?

Thank you for your response.

const menus = [
  {
    title: "About",
    submenu: [
      {
        subtitle: "Submenu 1-1",
      },
      {
        subtitle: "Submenu 1-2",
      },
    ],
  },
  {
    title: "Contact Us",
    submenu: [
      {
        subtitle: "Submenu 2-1",
      },
      {
        subtitle: "Submenu 2-2",
      },
    ],
  },
]

function NavList() {
 const [menuOpen, setMenuOpen] = useState(false);
 const [mobileOpen, setMobileOpen] = useState(false);


{menus.map((menu, key) => (
    <React.Fragment key={key}>
          {item.submenu ? (
            <>
              <Menu
                open={menuOpen}
                handler={setMenuOpen}
                allowHover={true}
              >
                <MenuHandler>
                  <Typography as="div">
                    <ListItem
                      selected={menuOpen}
                      onClick={() => setMobileOpen((cur) => !cur)}
                    >
                      {item.title}
                      <ChevronDownIcon
                        strokeWidth={2.5}
                        className={`hidden h-4 w-4 transition-transform lg:block ${
                          menuOpen ? "rotate-180" : ""
                        }`}
                      />
                      <ChevronDownIcon
                        strokeWidth={2.5}
                        className={`block h-3 w-3 transition-transform lg:hidden ${
                          setMobileOpen ? "rotate-180" : ""
                        }`}
                      />
                    </ListItem>
                  </Typography>
                </MenuHandler>
                <MenuList className="hidden min-w-fit rounded-xl p-2 px-4 lg:block">
                  <ul className="flex flex-col gap-y-2 outline-none outline-0">
                    {item.submenu.map((item, key) => (
                      <a href="#" key={key}>
                        <MenuItem className="items-center rounded-lg p-0">
                          <div>
                            <Typography
                              variant="h6"
                              className="font-medium text-light-blue"
                            >
                              {item.subtitle}
                            </Typography>
                          </div>
                        </MenuItem>
                      </a>
                    ))}
                  </ul>
                </MenuList>
              </Menu>
            </>
          ) : (
            <Typography as="a" href="#">
              <ListItem className="flex items-center gap-1 py-2 pr-4">
                {item.title}
              </ListItem>
            </Typography>
          )}
        </React.Fragment>
 ))}
}