title: React Hook Form V7 - Material UI 5 Autocomplete: Lazy loaded values not validated
body: <p>I use react-hook-form V7 with an Material UI 5 Autocomplete input. My lazy loaded values in the Autocomplete are not validated on first submit click (but on second). What's wrong?</p>
  <pre class="lang-js prettyprint-override"><code>
    useEffect(() =&gt; {
      setItemList([
        { id: 1, name: &quot;item1&quot; },
        { id: 2, name: &quot;item2&quot; }
      ]);
      setItemIdSelected(2);
    }, []);
  
    [...]
  
    &lt;Autocomplete
      options={itemList}
      getOptionLabel={(item) =&gt; (item.name ? item.name : &quot;&quot;)}
      getOptionSelected={(option, value) =&gt;
        value === undefined || value === &quot;&quot; || option.id === value.id
      }
      value={
        itemIdSelected
          ? itemList.find((item) =&gt; item.id === itemIdSelected)
          : &quot;&quot;
      }
      onChange={(event, items) =&gt; {
        if (items !== null) {
          setItemIdSelected(items.id);
        }
      }}
      renderInput={(params) =&gt; (
        &lt;TextField
          {...params}
          {...itemsIdFormHookRest}
          label=&quot;items&quot;
          margin=&quot;normal&quot;
          variant=&quot;outlined&quot;
          inputRef={itemsIdFormHookRef}
          error={errors.itemsId ? true : false}
          helperText={errors.itemsId &amp;&amp; &quot;item required&quot;}
          required
        /&gt;
      )}
    /&gt;
    
  [...]
  </code></pre>
  <p>Please have a look to the code on code sandbox:</p>
  <p><a href="https://codesandbox.io/s/react-hook-form-v7-material-ui-5-lazy-loaded-values-not-validated-in-autocomplete-8v51y?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit React Hook Form V7 - Material UI 5 - lazy loaded values not validated in Autocomplete" /></a></p>