How to use popperComponent Props while using useAutoComplete in material ui reactJS

I want to change position of popper using useAutocomplete I can easily do it with autocomplete but i want to do this with useAutocomplete

You can wrap the list within a popper element and use placement prop to specify the position.

Note: You have to tie up popper element with the input element in order to display it right under the textbox.

<Popper open={Boolean(anchorEl)} anchorEl={anchorEl} placement="right">
    {groupedOptions.length > 0 ? (
      <ul className={classes.listbox} {...getListboxProps()}>
        {groupedOptions.map((option, index) => (
          <li {...getOptionProps({ option, index })}>{option.title}</li>
        ))}
      </ul>
    ) : null}
  </Popper>

You can find the implementation here:

https://codesandbox.io/s/useautocomplete-pmckw

Placement prop of popper element takes in following values : 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top'

Currently useAutocomplete and autocomplete are under material-ui lab. This is an entire implementation of auto-complete feature using react material-ui core components alone:

https://codesandbox.io/s/autocomplete-9enud