Cannot use arrow keys to navigate menus when the first MenuItem is wrapped in a Fragment

[phudlow]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Should be able to use the arrow (up and down keys) to select MenuItems when any MenuItems are wrapped in a React.Fragment.

Expected Behavior 🤔

For the first MenuItem only, if it is wrapped in a React.Fragment, you cannot use arrow keys to navigate MenuItems in that Menu.

Steps to Reproduce 🕹

First Menuitem Wrapped in Fragment (broken)
https://codesandbox.io/s/only-second-menuitem-not-wrapped-in-fragment-h1s6f

First Menuitem Not Wrapped in Fragment (ok, works)
https://codesandbox.io/s/only-first-menuitem-not-wrapped-in-fragment-ym4fr

Whether or not MenuItems besides the first are wrapped in Fragments has no effect. Only the first MenuItem being wrapped in a Fragment causes the bug.

Context 🔦

We have a component that may block rendering of children based on condition that checks permissions. If we render the children it returns <>{props.children}</> rather than null

Your Environment 🌎

Tech	Version
Material-UI	v4.10.12
React	v16.12.0
Browser	Chrome v83.0.4103.106
TypeScript	n/a

[oliviertassinari]

Closing for #14943