I have three tabs with their own menu with a dynamic number of menu buttons. Switching to another tab doesn't close any open menus. Is this normal?

Question

This is one of my tabs:

    <Tab.Panels className="mt-2">
        <Tab.Panel
          key="Employee"
          className={classNames(
            'rounded-xl bg-white p-3 h-it',
          )}
        >

          {/**For Axios.GET method loading */}
          <div>
            <LoadingHorizontalLine isLoading={isHorizontalLoading}/>
          </div>

          <ul className='text-center'>
            {/*---------------------------------------*/}
            <Menu as="div" className="space-y-2">
              {employeeForms.map((user) => (
                <Menu key={user.id}>
                  {({ open }) => (
                    <>
                      <Menu.Button>
                        {user.username}
                        <ChevronUpIcon
                          className={`${
                            open ? 'rotate-180 transform' : ''
                          } h-5 w-5 text-black`}
                        />
                      </Menu.Button>
                      {user.forms.length === 0 ? (
                        <Menu.Items>
                          <div className="flex flex-col ">
                            <Menu.Item className="text-gray-500">
                              <p>No forms available.</p>
                            </Menu.Item>
                          </div>
                        </Menu.Items>
                      ) : (
                      <Menu.Items>
                        {user.forms.map((form) => (
                          <Menu.Item key={form.id}>
                            {({ active }) => (
                              <li className='hover:bg-accent border-b-2 border-gray-300'>
                                <ul className="mt-1  text-xs font-normal">
                                  <h3 className="text-sm font-medium leading-5">
                                    {form.title}
                                  </h3>
                                </ul>
                              <ul>
                                <button title="Edit Activity Design"
                                 onClick={() =>  handleEditClick(form)}>
                                  <PencilIcon/>
                                </button>
                                <button title="Archive Activity Design" 
                                 onClick={() => handleArchiveClick(form)}>
                                  <ArchiveBoxArrowDownIcon/>
                                </button>
                                <button title="Create Accomplishment Report" 
                                 onClick={() => handleGenerateAccomplishmentReportClick(form)}>
                                  <SparklesIcon />
                                </button>
                              </ul>
                            </li>
                            )}
                          </Menu.Item>
                        ))}
                      </Menu.Items>
                      )}
                    </>
                  )}
                </Menu>
              ))}
            </Menu>
          </ul>
        </Tab.Panel>

When I open one menu item and leave it open then switch to another tab and open another menu item in that tab it's content is exactly the same as the open menu item in the first tab when they shouldn't.

I tried creating my own functions to manage the states of each menu item but it doesn't seem to work with headless ui.