[bug]: Menubar keeps closing when render by looping the data

[zulianAdryan]

Describe the bug

Menubar component keeps closing (it won't show the MenubarContent) when it renders based on loops. Example case is like this:

const menus = [
  {
    trigger: "Menu One",
    content: [
      {
        sub: {
          trigger: "Submenu One",
          content: {
            item: [
              {
                text: "Item One",
                path: "#",
              },
              {
                text: "Item Two",
                path: "#",
              },
            ],
          },
        },
        item: null,
      }
    ],
  },
  {
    trigger: "Menu Two",
    content: [
      {
        sub: null,
        item: {
          text: "Load Profile",
          path: "/load-profile",
        },
      },
      {
        sub: null,
        item: {
          text: "EOB Data Profile",
          path: "#",
        },
      },
    ],
  },
];

Then use it as follows:

<Menubar>
        {menus .map((nav, index) => (
          <MenubarMenu key={`nav_${nav.trigger}`}>
            <MenubarTrigger>
              {nav.trigger}
            </MenubarTrigger>
            {nav.content.map((cont, index) => (
              <MenubarContent key={`cont_${index}`}>
                {cont.sub ? (
                  <MenubarSub>
                    <MenubarSubTrigger>{cont.sub.trigger}</MenubarSubTrigger>
                    {cont.sub.content &&
                      cont.sub.content.item.map((sub, index) => (
                        <MenubarItem
                          key={`sub_${index}`}
                          onClick={() => {
                            append({ path: sub.path, label: sub.text });
                          }}
                        >
                          {sub.text}
                        </MenubarItem>
                      ))}
                  </MenubarSub>
                ) : cont.item ? (
                  <MenubarItem
                    onClick={() => {
                      if (cont.item) {
                        append({
                          path: cont.item.path,
                          label: cont.item.text,
                        });
                      }
                    }}
                  >
                    {cont.item.text}
                  </MenubarItem>
                ) : null}
              </MenubarContent>
            ))}
          </MenubarMenu>
        ))}
</Menubar>

I've checked if I did something wrong when declares or use the array for the loops operation but I don't find anything wrong, so may be someone can find the mistake if it's not a bug.

Affected component/components

Menubar

How to reproduce

1. declares the menu data variable for the menubar component

2. loop the menubar content based on that variable

3. dex

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Windows
Chrome

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[zulianAdryan]

My fault it turns out I have a missing component in the loop. and also forget to use instead of for content inside the