[Need Help]: Is there any way to have non-list items inside the `menu` ?

[OmkarK45]

Hello!
Thanks for creating this library, I am really digging it

I had a use case where I wanted a horizontal list of buttons inside the menu while also having regular list items below this carousel

However, this does not seem to work correctly because useCombobox expects the children of ul to contain only iterated list items

So the interactions done inside carousel do not work. For ex. Pressing the button in carousel won't work

Any work around for this?

{isOpen && (
        <div
          {...getMenuProps({}, { suppressRefError: true })}
          styleName="menu-wrapper"
        >
          <div styleName="recent-bar">
            <button type="button" onClick={// Some action}>
              Do Something!
            </button>
          </div>

          <ul styleName={`menu ${isOpen ? 'open' : ''}`}>
            {isFetching && <li>Loading...</li>}
            {items.map((item, index) => (
              <li
                key={item}
                {...getItemProps({ item, index })}
                styleName={`item ${
                  highlightedIndex === index ? 'highlighted' : ''
                }`}
              >
                {item}
              </li>
            ))}
          </ul>
        </div>
      )}