title: Element is removed from document, but jest still finds it
body: <p>I have built a wrapper around react-toastify, so that I can call it at multiple places.</p>
  <p>Here is the code for wrapper:</p>
  <pre><code>import { ReactText } from 'react';
  import { toast } from 'react-toastify';
  
  export const showNotification: (
    message: string,
    type?: 'info' | 'success' | 'warning' | 'error',
    timeOut?: number,
  ) =&gt; ReactText
    = (message, type = 'success', timeOut = 5000) =&gt; toast(
        message, { type, autoClose: timeOut },
      );
  
  export const dismissNotification = (toastId: ReactText) =&gt; toast.dismiss(toastId);
  
  </code></pre>
  <p>Now, I am testing my dismissNotification function.</p>
  <p>I have written this test case:</p>
  <pre><code>it('dismisses notification when called', async () =&gt; {
    render(&lt;ToastContainer /&gt;);
    const notificationId = showNotification('Test Notification', 'success', 2000);
    await waitFor(() =&gt; {
      expect(screen.getByText('Test Notification')).toBeInTheDocument();
    });
    dismissNotification(notificationId);
    await waitForElementToBeRemoved(() =&gt; {
      expect(screen.queryByText('Test Notification')).not.toBeInTheDocument();
    });
  });
  
  </code></pre>
  <p>But last test case always fails saying that a dom node with text <code>Test Notification</code> is present.</p>
  <p>Actual Error:</p>
  <pre><code>dismisses notification when called
  
      expect(element).not.toBeInTheDocument()
  
      expected document not to contain element, found &lt;div class=&quot;Toastify__toast-body&quot; role=&quot;alert&quot;&gt;Test Notification&lt;/div&gt; instead
  
  </code></pre>