How to use Autocomplete with a popover ?

[erangeles]

Hello, I wanted to implement Autocomplete with a popover on Menu so when I start typing in the Input field, the Popover would trigger open and when I select on a MenuItem the Input text would get overridden and the Popover will close. Is it possible to compose this? I tried adding MenuTrigger but nothing would render and it seems incompatible. Thanks

import {Autocomplete, Button, Input, Label, Menu, MenuItem, SearchField, useFilter} from 'react-aria-components';

function Example() {
  let { contains } = useFilter({ sensitivity: 'base' });
  return (
    <div className="autocomplete">
      <Autocomplete filter={contains}>
        <SearchField>
          <Label>Commands</Label>
          <Input placeholder="Search commands...." />   <---- the trigger should be input to this field
          <Button>✕</Button>
        </SearchField>
        <Menu>     <------ Menu should render in a popover while allowing user to type in Input field
          <MenuItem>Create new file...</MenuItem>
          <MenuItem>Create new folder...</MenuItem>
          <MenuItem>Assign to...</MenuItem>
          <MenuItem>Assign to me</MenuItem>
          <MenuItem>Change status...</MenuItem>
          <MenuItem>Change priority...</MenuItem>
          <MenuItem>Add label...</MenuItem>
          <MenuItem>Remove label...</MenuItem>
        </Menu>
      </Autocomplete>
    </div>
  );
}