Make menuItem accessible for keyboard inputs

[ThomasVanleynseele]

Thanks for the library, we are enjoying it!

Because you use an MUI Menu with MenuItem, I would have expected the following behavior. Pressing the letter "B" on my keyboard while the dropdown is open should go to the first country that starts with the letter B.

This is the default behavior of MUI and I'm not exactly sure why it isn't working here. https://mui.com/material-ui/react-menu/#main-content

Steps to reproduce Open the flagsMenu, press a letter of the country that you are looking for, and nothing happens.

I tried debugging it myself, but couldn't get it to work fully... When placing a dummy <MenuItem /> right above the <FlagsList .../> (so it's the first element) then it did work. 🙀

[ThomasVanleynseele]

FYI: I have opened an issue at MUI: https://github.com/mui/material-ui/issues/35255

The problem is fixed when using <MenuItem /> directly instead of deeply nesting your components.

Simplified example that does work:

 <Menu
      anchorEl={anchorEl}
      open={Boolean(anchorEl)}
      {...rest}
    >
      {countriesFiltered.map((isoCodeItem) => {
        return (
          <MenuItem onClick={handleClick} key={isoCodeItem}>
            {isoCodeItem}
          </MenuItem>
        );
      })}
    </Menu>