title: Testing React select wrapped in TextField with react-hook-form
body: <p>i have this piece component.</p>
  <pre><code>&lt;ListItem&gt;
    &lt;Controller
      control={control}
      name=&quot;topic&quot;
      defaultValue={initial}
      rules={{
        required: &quot;Choisir le sujet&quot;
      }}
      render={({ field }) =&gt; (
        &lt;TextField
          style={{
            background: theme.palette.secondary.main,
            overflow: &quot;hidden&quot;
          }}
          id=&quot;topic&quot;
          data-testid=&quot;select-topic&quot;
          placeholder=&quot;chosir le sujet&quot;
          variant=&quot;outlined&quot;
          InputLabelProps={{
            shrink: true
          }}
          InputProps={{
            startAdornment: (
              &lt;InputAdornment position=&quot;start&quot;&gt;Sujet:&lt;/InputAdornment&gt;
            ),
            inputComponent: () =&gt; (
              &lt;Select
                {...field}
                inputRef={field.ref}
                options={suggestionOptions}
                styles={customStyles}
                defaultOptions
                maxMenuHeight={200}
                menuPortalTarget={document.body}
              /&gt;
            )
          }}
          onChange={(event) =&gt; field.onChange(event.target.value)}
          error={Boolean(errors.topic)}
          helperText={errors.topic ? errors.topic.message : &quot;&quot;}
        /&gt;
      )}
    /&gt;
  &lt;/ListItem&gt;;
  </code></pre>
  <p>where options are :</p>
  <pre><code>const suggestionOptions = [
      {
        label: 'Reporter un bug',
        value: 'bug',
      },
      {
        label: 'Idée amélioration école',
        value: 'idea',
      },
      {
        label: 'Idée amélioration site',
        value: 'improvment',
      },
      {
        label: 'Autre sujet',
        value: 'other',
      },
    ]
  </code></pre>
  <p>I'm trying to perfomrm test as follow:</p>
  <pre><code>import selectEvent from &quot;react-select-event&quot;;
  import { render, screen, cleanup, fireEvent, waitFor, act } from &quot;test-utils&quot;;
  
  it(&quot;should allow to select&quot;, async () =&gt; {
    render(&lt;InformationContactsEcrireScreen /&gt;);
    await waitFor(() =&gt; {
      selectEvent.openMenu(screen.getByTestId(&quot;select-topic&quot;));
    });
  
    await waitFor(() =&gt; {
      expect(screen.getByText(/Reporter un bug/i)).toBeInTheDocument();
    });
  });
  </code></pre>
  <p>The test is failing with the message:</p>
  <blockquote>
  <p>TestingLibraryElementError: Unable to find an element with the text:
  /Reporter un bug/i</p>
  </blockquote>
  <p>After couple of hour dealing with that ... Does anybody know how to solve this.
  Thanks in advance</p>