MenuItem in Select breaks for `value={foo.bar}` but not `value={quuz}`

Assume I have some country data like this:

const countryData = [ 
  { code: 'BEL', name: 'Belgium' },
  // ...
]

I would like to generate MenuItems inside a Select like this:

<Select ...>
  <For each={countryData}>
    {(c) => <MenuItem value={c.code}>{c.name}</MenuItem>}
  </For>
</Select>

However, selecting such an option blanks the field and gives an error in the console (twice):

MUI: A component is changing the controlled value state of Select to be uncontrolled.
Elements should not switch from uncontrolled to controlled (or vice versa).
Decide between using a controlled or uncontrolled Select element for the lifetime of the component.
The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.
More info: https://fb.me/react-controlled-components

One fix I discovered is by assigning const code = c.code first, like this:

<For each={countryData}>
  {(c) => {
    const code = c.code; // <--- this makes it work!
    return <MenuItem value={code}>{c.name}</MenuItem>;
  }}
</For>

I think it would be nice if the value={c.code} would actually work, or otherwise we could add some explanation in the docs.

Full stackblitz mixing the two approaches, tested in Firefox and Chrome.

swordev / suid

MenuItem in Select breaks for `value={foo.bar}` but not `value={quuz}` #222