title: React Testing Library - Unable to find the element with data-testid
body: <p>I am following the docs for react-testing-library to find if the element with <code>data-testid</code> attribute is rendered or not.</p>
  <p>The react-testing-library is not able to find the element  even though it exists.</p>
  <p><strong>TEST</strong></p>
  <pre><code>test('Renders step based on the active step', () =&gt; {
      render(&lt;RenderStep /&gt;, { initialState: { implOnboard: initialState } });
    });
    expect(screen.getByTestId('step-1')).toBeDefined(); //  THROWS ERROR ❌
  }
  </code></pre>
  <p><strong>COMPONENT</strong></p>
  <pre><code> // redux
    const { activeStep } = useSelector((state) =&gt; state.implOnboard);
  
    const renderStep = () =&gt; {
      switch (activeStep) {
        case 1:
          console.log('Rendering this '); //  THIS IS GETTING LOGGED TOO!
          return (
            &lt;div data-testid=&quot;step-1&quot;&gt;
              &lt;StepOne /&gt;
            &lt;/div&gt;
          );
        case 2:
          return (
            &lt;div data-testid=&quot;step-2&quot;&gt;
              &lt;StepTwo /&gt;
            &lt;/div&gt;
          );
      }
    };
    return &lt;React.Fragment&gt;{renderStep()}&lt;/React.Fragment&gt;;
  </code></pre>
  <p><strong>ERROR</strong></p>
  <pre><code>TestingLibraryElementError: Unable to find an element by: [data-testid=&quot;step-1&quot;]
  </code></pre>