title: Race Condition: Material-UI Select thinks value is out of range when performing conditional rendering to generate MenuItems
body: <p>I'm using Material-UI to create some Selects for my dashboard. The MenuItems (options) in the Select are generated using conditional rendering. I use map to return MenuItems based on a set list of options from an array that is retrieved from a remote API. The value of the Select is also determined from a value retrieved from the remote API. Upon API response the defaultValue is updated to the actual value.</p>
  <p>Here's a quick look at the relevant portion of the component:</p>
  <pre><code>            &lt;Select
              MenuProps={{
                  className: classes.selectMenu,
              }}
              classes={{
                  select: classes.select,
              }}
              id={id}
              name={name}
              defaultValue={defaultValue}
              value={value}
              onChange={onChange}
          &gt;
              &lt;MenuItem
                  disabled
                  classes={{
                      root: classes.selectMenuItem,
                  }}
                  value={0}
              &gt;
                  {labelText}
              &lt;/MenuItem&gt;
              {selectOptions.map(opt =&gt;
                  &lt;MenuItem
                  classes={{
                      root: classes.selectMenuItem,
                      selected: classes.selectMenuItemSelected,
                  }}
                  value={opt.IDX}
                  key={`${name}${opt.IDX}`}
              &gt;
                  {opt.Name}
              &lt;/MenuItem&gt;)}
          &lt;/Select&gt;
  </code></pre>
  <p>Each one of the options has a IDX property and a name property. So for instance a list of users in the dropdown would show Bob, Sally, Jeff and the values would be 1,2,3,etc relative to Bob, Sally, and Jeff's ID numbers. As you can see there is a default option with value 0 specified and a defaultValue prop.</p>
  <p>I receive the following warning in the JS console:</p>
  <blockquote>
  <pre><code>You have provided an out-of-range value `1` for the select component.
  Consider providing a value that matches one of the available options or ''.
  The available values are `0`.
  </code></pre>
  </blockquote>
  <p>which I can only assume is because React doesn't know about the conditionally rendered MenuItems until after they are rendered, and at that point it is possible that the remote API has already responded and the value of the Select component is already set to something besides the defaultValue.</p>
  <p>This does not seem to affect code functionality in any way but it is a race condition and I don't like it. Is there a way to perform a check to ensure my component has all MenuItems available and their values set before setting the parent select component's value?</p>
  <p>I was thinking about setting something like an isFullyProcessed boolean within the JSX somehow and then working with that.</p>
  <p>EDIT:</p>
  <p>Here is how I'm fetching my data on the parent page. The schedules and groups are the options data and the user is where the value comes from.</p>
  <pre><code>   useEffect(() =&gt; {
      axios.get(`${server}${uPath}/data`).then((response) =&gt; {
        const parsed = JSON.parse(response.data);
        setSchedules(parsed.schedules);
        setGroups(parsed.groups);
        setUser(parsed.user);
  </code></pre>