How can I get keyboard tabbing and aria-labels on a primereact menu popup to work?

Question

I would like to be able to use the keyboard to press enter on a button and then tab through the corresponding menu popup to select the right option. Unfortunately when I press enter on the button, it opens the menu popup but doesn't allow me to tab through it.

My code is below:

import { Button } from 'primereact/button';
import { Menu } from 'primereact/menu';

function Header() {
  const [menu, setMenu] = useState('');
  const testModelItems = [{label: 'Menu', items: [{label: 'Main 1'}, {label: 'Option 2'}]}];

  return (
    <div className={'menu-button-div'}>
      <Menu model={testModelItems} popup ref={(e) => setMenu(e)} id={'menu'} aria-labelledby={'menu-dropdown'}/>
      <Button aria-expanded={false} aria-labelledby={'menu-dropdown'} aria-controls={'menu'} aria-haspopup label={'Main Menu'} onClick={(e) => menu.toggle(e)}/>
    </div>
  )
}