gth})`}
        </TabTitleText>
        <span className={styles.tabsLinkToggleIcon}>
          <AngleRightIcon />
        </span>
      </button>
    </li>
  );

  const tabs = overflowingTabs.map((tab) => (
    <MenuItem key={tab.eventKey} itemId={tab.eventKey} isSelected={localActiveKey === tab.eventKey}>
      {tab.title}
    </MenuItem>
  ));

  const onTabSelect = (event: React.MouseEvent<HTMLElement, MouseEvent>, key: number | string) => {
    closeMenu();
    const selectedTabRef = overflowingTabs.find((tab) => tab.eventKey === key).tabContentRef;
    handleTabClick(event, key, selectedTabRef);
  };

  const overflowMenu = (
    <Menu ref={menuRef} onSelect={(ev, itemId) => onTabSelect(ev as React.MouseEvent<HTMLElement, MouseEvent>, itemId)}>
      <MenuContent>
        <MenuList>{tabs}</MenuList>
      </MenuContent>
    </Menu>
  );

  return (
    <React.Fragment>
      {overflowTab}
      <Popper
        triggerRef={overflowTabRef}
        popper={overflowMenu}
        popperRef={menuRef}
        isVisible={isExpanded}
        minWidth="revert"
        appendTo={overflowLIRef.current}
        zIndex={zIndex}
      />
    </React.Fragment>
  );
};

OverflowTab.displayName = 'OverflowTab';