title: Cypress select first item of Autocomplete Material UI
body: <p>I have a react hook forms that contains Autocomplete material UI controls.</p>
  <pre><code>    &lt;Controller
        as={
          &lt;Autocomplete
            data-cy=&quot;profileCountry&quot;
            options={countries}
            getOptionLabel={option =&gt; option.name}
            renderInput={params =&gt; (
              &lt;TextField
                {...params}
                label=&quot;* Country&quot;
                placeholder=&quot;Select a Country&quot;
  
                InputLabelProps={{
                  shrink: true
                }}
                variant=&quot;outlined&quot;
              /&gt;
            )}
          /&gt;
        }
        rules={{ required: true }}
        onChange={([, data]) =&gt; data}
        defaultValue={{ id: 0, name: &quot;&quot; }}
        getOptionSelected={(option, value) =&gt; option.id === value.id}
        name=&quot;country&quot;
        id=&quot;country&quot;
        control={control}
      /&gt;
  </code></pre>
  <p>I want to run a cypress test case to fill up the form and submit. How can I select like the first option in this component using cypress.</p>
  <p>Currently I just tried my luck like the following.</p>
  <pre><code>cy.get(&quot;[data-cy=profileCountry]&quot;).select(&quot;Germany&quot;);
  </code></pre>