downshift js question: is there a way to flip menu upwards to prevent y-overflow?

Question

the app uses downshift js for an autocomplete dropdown and I can't figure out a way to make it flip upwards when you get to the bottom of the page so it doesn't overflow. I heard popper js may help with this but I haven't seen any examples using downshift.

  return (
<Downshift
  selectedItem={selectedValue}
  onStateChange={handleStateChange}
  onInputValueChange={handleInputValueChange}
  itemToString={(item) => (item ? item.label : '')}
  stateReducer={stateReducer}
>
  {(downshiftObject) => {
    const { getRootProps, getInputProps, getMenuProps } = downshiftObject

    return (
      <AutoCompleteResultsWrapper
        {...getRootProps(undefined, {
          suppressRefError: true,
        })}
        className={className}
      >
        <div>
          <AutoCompleteInput
            {...getInputProps({ onKeyDown })}
            aria-describedby={`aria-descp${id}`}
            id={id}
            {...restOfProps}
          />
          {helperText && <HelperText id={`aria-descp${id}`}>{helperText}</HelperText>}
        </div>
        <Menu {...getMenuProps({ isOpen: isMenuOpen })}>
          {isMenuOpen && getMenuContents(downshiftObject)}
        </Menu>
        {isMenuOpen && !menuItems.length && (
          <NoResultSection>
            <p data-testid="noResult">{noResultsText}</p>
            {noResultsAction}
          </NoResultSection>
        )}
      </AutoCompleteResultsWrapper>
    )
  }}
</Downshift>

)