title: React testing lib not update the state
body: <p>My component:</p>
  <pre><code>import React from 'react'
  
  const TestAsync = () =&gt; {
    const [counter, setCounter] = React.useState(0)
  
    const delayCount = () =&gt; (
      setTimeout(() =&gt; {
        setCounter(counter + 1)
      }, 500)
    )
    
  return (
    &lt;&gt;
      &lt;h1 data-testid=&quot;counter&quot;&gt;{ counter }&lt;/h1&gt;
      &lt;button data-testid=&quot;button-up&quot; onClick={delayCount}&gt; Up&lt;/button&gt;
      &lt;button data-testid=&quot;button-down&quot; onClick={() =&gt; setCounter(counter - 1)}&gt;Down&lt;/button&gt;
   &lt;/&gt;
      )
    }
    
    export default TestAsync
  </code></pre>
  <p>My test file:</p>
  <pre><code>describe(&quot;Test async&quot;, () =&gt; {
    it(&quot;increments counter after 0.5s&quot;, async () =&gt; {
      const { getByTestId, getByText } = render(&lt;TestAsync /&gt;);
  
      fireEvent.click(getByTestId(&quot;button-up&quot;));
  
      const counter = await waitForElement(() =&gt; getByTestId(&quot;counter&quot;));
  
      expect(counter).toHaveTextContent(&quot;1&quot;);
    });
  });
  
  </code></pre>
  <p>After run the test file, I got error said:</p>
  <pre><code>Expected element to have text content:                                                          
        1                                                                                             
  Received:                                                                                       
        0
  </code></pre>
  <p>I am a little bit confused why I use <code>waitForElement</code> to get the element but why the element still has the old value?</p>
  <p>React-testing-lib version 9.3.2</p>