Arrow down continue to extra Menu Item

Question

I am rendering a custom menu for the React Bootstrap Typeahead. When I used the arrow down key, it goes through the list of the initially added MenuItems, but it stops and doesn't go to the button.

It seems that it doesn't recognize the added elements as options to go through. In the same manner, when there are not results, arrow down would just highlight the footer button.

How could I approach this? I haven't found anything in the MenuItem that let's me do that

renderMenu = (results, menuProps) => {
            const { menuFooterButtonOptions } = this.props;
            let showFooterButton = menuFooterButtonOptions && menuFooterButtonOptions?.show;
            
            // add all results from query
            const items = results.map((result, index) => (
                <MenuItem key={index} option={result} position={index}>
                    {menuProps.renderMenuItemChildren ? menuProps.renderMenuItemChildren(result, this.props, index) : result}
                </MenuItem>
            ));
            
            // With the button, the menu thinks there are elements so it doesn't add the empty label. Here we add it.
            if (showFooterButton && (items.length < 1)) {
                items.push(<MenuItem disabled={true} active={false}><span>No matches found.</span></MenuItem>);
            }
            
            // add footerButton if needed
            if (showFooterButton) {
                const button = (
                    <MenuItem option={{key: "footerButton"}} onClick={(_) => {menuFooterButtonOptions.onClick();}}>
                        <span className={"btn-link"}>
                            {menuFooterButtonOptions.text}
                        </span>
                    </MenuItem>
                );
                items.push(<Menu.Divider />);
                items.push(button);
            }

            return (
                <Menu {...menuProps}>
                    {items}
                </Menu>
            );
        };

Found this, which shows that it only looks at results, nothing else :(

_this._handleKeyDown = function (e, results, isMenuShown) {
        var activeItem = _this.state.activeItem;


        switch (e.keyCode) {
          case _keyCode.UP:
          case _keyCode.DOWN:
            if (!isMenuShown) {
              _this._showMenu();
              break;
            }

            var activeIndex = _this.state.activeIndex;

            // Prevents input cursor from going to the beginning when pressing up.

            e.preventDefault();

            // Increment or decrement index based on user keystroke.
            activeIndex += e.keyCode === _keyCode.UP ? -1 : 1;

            // Skip over any disabled options.
            while (results[activeIndex] && results[activeIndex].disabled) {
              activeIndex += e.keyCode === _keyCode.UP ? -1 : 1;
            }

            // If we've reached the end, go back to the beginning or vice-versa.
            if (activeIndex === results.length) {
              activeIndex = -1;
            } else if (activeIndex === -2) {
              activeIndex = results.length - 1;
            }

            _this._handleActiveIndexChange(activeIndex);
            break;
          case _keyCode.ESC:
            isMenuShown && _this._hideMenu();
            break;
          case _keyCode.RETURN:
            if (!isMenuShown) {
              break;
            }

            // Prevent form submission while menu is open.
            e.preventDefault();
            activeItem && _this._handleMenuItemSelect(activeItem, e);
            break;
          case _keyCode.RIGHT:
          case _keyCode.TAB:
            if (!isMenuShown) {
              break;
            }

            if (activeItem && !activeItem.paginationOption) {
              // Prevent blurring when selecting the active item.
              e.keyCode === _keyCode.TAB && e.preventDefault();
              _this._handleSelectionAdd(activeItem);
              break;
            }

            if (e.keyCode === _keyCode.TAB) {
              _this._hideMenu();
            }
            break;
        }

        _this.props.onKeyDown(e);
      };