[Select] Remove the React.cloneElement usage

I have a form with two text fields. The first text field works as expected in selecting and closing on click, but the second does and not have have gone in to very hacky territory in order to try to get it to work but it does not.

• [X ] This is not a v0.x issue.
• [X ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

The menu option should blur on click

Current Behavior 😯

It stays open and does not trigger a handleChange or handleBlur event in the parent. In the code sandbox it doesn't even open.

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/create-react-app-forked-s5ouz?file=/src/pages/index.js

Context 🔦

I need wrap the menu in an EnhancedComponent in order to Observe certain fields on the model (async)

Your Environment 🌎

Start with the linked CodeSandbox reproduction and trace the Material UI Select behavior involving React.cloneElement. Confirm how the two text fields behave, then verify that the menu blurs on click and the parent handleChange and handleBlur events are triggered without the reported regression.