Grouped TextField select: value becomes undefined onChange

When you wrap ListSubheader & MenuItems inside <TextField select /> in an element, like div, the value is lost (=undefined) on the next onChange.

• 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 😯

You are not allowed to use react fragments and when you use an element to dynamically map to a single root, value becomes undefined onChange.

Expected Behavior 🤔

It should be possible to either use fragment or wrap the above components in another element.

Steps to Reproduce 🕹

https://codesandbox.io/s/wizardly-snowflake-l7lu4

Steps:

1. open the example above
2. change the select value
3. see error

Your Environment 🌎

Tech	Version
Material-UI	v4.8.0
React	16.8.4
Browser	firefox 71
TypeScript	3.3.3

[akomm]

Thanks.

The example did not really help, as it uses static definitions, not dynamic.

But I figured it out now myself - no intermediary component needed (also no dead value).

For those, who might seek for the solution: https://codesandbox.io/s/silly-mclaren-k7qul

[oliviertassinari]

You have to apply the value prop on the outer most element, this is related to #14943.