title: testing library user event is one step behind
body: <p>I have a form with two inputs. one is textbox the other one is material ui autocomplete.
  I am using Yup to validate them. If any of them is empty then error text appears. They are empty as default. In initial render there are two errors expectedly. However, when I fill the inputs (one by typing, the other one by selecting), errors messages become 1. But should 0 since two of them is filled.</p>
  <pre><code>    const title = screen.getByRole('textbox', {name: 'title'})
      const kind = screen.getByRole('textbox', {name: 'kind'})
      const errors = await screen.findAllByText('Can not be blank!')
      expect(errors).toHaveLength(2)
  
      userEvent.type(title, 'abc')
      userEvent.click(kind)
      const menuItem = await screen.findByText('first option')
      userEvent.click(menuItem)
      const newErrors = screen.queryAllByText('Can not be blank!')
      await waitFor(() =&gt; expect(newErrors).toHaveLength(0))
  </code></pre>
  <p>The remaining error is related to kind right now. However, if I comment kind, there are two errors. If I comment title, there are still 2 errors. So this made me think that maybe this is a problem with async. so I used await and waitFor in almost everywhere but did not work. What is the problem here?</p>