Пользовательский интерфейс материалов с подпунктами не закроет все меню

Question

У меня есть компонент меню Material UI с пользовательскими элементами меню. Теперь, когда меню и подменю открыты, я хотел бы иметь возможность закрыть все меню при нажатии за пределами меню. Мне все еще нужно сделать два щелчка, сначала закрыв подменю, а затем собственно меню.

Документация Меню MUI относится к использованию anchorEl в качестве boolean для определения, если менюоткрыт, но даже если я отправляю функцию обратного вызова close из пользовательских пунктов меню, она закрывается только с помощью handleClose() при нажатии за пределами компонента. Таким образом, на прилагаемом рисунке закрыт только Контейнер, содержащий Корпоративные финансы, а не меню.

Не могу понять, поскольку anchorEl превращается в ноль в closeFunction, главное меню остается открытым,Пробовал с menu и MenuItems и Popover, которые построены на Модальном компоненте.

MenuComponent:

const MoreMenu = ({
  userTagData,
  onChangeItemName,
  selectedTags,
  onTagSelected,
  onRemoveItem,
  data,
  item,
}) => {
  const [anchorEl, setAnchorEl] = useState(null);
  const [subMenuPopUpName, setSubMenuPopUpName] = useState('');


  const renderChangeTitlePopUp = () => (
    <ChangeTitleContainer
      onChangeItemName={onChangeItemName}
      closeMenuItem={handleClose}
      item={item}
    />
  );


  const renderAddTagPopUp = () => (
    <AddTagContainer
      item={item}
      userTagData={userTagData}
      selectedTags={selectedTags}
      onTagSelected={onTagSelected}
    />
  );

  const renderRemoveItemContainer = () => (
    <RemoveItemContainer
      item={item}
      onRemoveItem={onRemoveItem}
      closeMenuItem={handeleClose}
    />
  );

  const renderDefaultPopup = () => (
    <div><p>Standard menu post</p></div>
  );


  const menuItemPopUpSwitcher = (name) => {
    switch (name) {
      case ADDTAG:
        return renderAddTagPopUp();
      case CHANGETITLE:
        return renderChangeTitlePopUp();
      case REMOVEITEM:
        return renderRemoveItemContainer();
      default:
        return renderDefaultPopup();
    }
  };

  const handleMenuItemClick = (item, event) => {
    setAnchorEl(event.currentTarget);
    setSubMenuPopUpName(item.title);
    setAnchorEl(event.currentTarget);
    menuItemPopUpSwitcher(item);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <Fragment>
      <MoreButton
        data={data}
        handleMenuItemClick={handleMenuItemClick}
      />
      <Menu
        open={Boolean(anchorEl)}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'top',
          horizontal: 'left',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'right',
        }}
      >

        {menuItemPopUpSwitcher(subMenuPopUpName)}

      </Menu>
    </Fragment>
  );
};custom