How should I test the closing of a popup menu?

I'm a noob when it comes to testing React components. I suspect I may be approaching this all wrong, and my lack of mastery of the DOM could be playing a role in my current troubles.

So how am I trying to test this today? Let's take a simple example of a menu that I wish to display in my mui-based app. For simplicity, the menu has one option: "Import Data".

   <div>
      <Button
        id="basic-button"
        aria-controls={open ? "basic-menu" : undefined}
        aria-haspopup="true"
        aria-expanded={open ? "true" : undefined}
        onClick={handleClick}
      >
        Main Menu
      </Button>
      <Menu
        id="basic-menu"
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        MenuListProps={{
          "aria-labelledby": "basic-button"
        }}
      >
        <MenuItem onClick={handleImport}>Import Data</MenuItem>
      </Menu>
    </div>

MUI displays text with <span> elements so I pass a function to queryByText to perform matches, but the gist of the test is pretty straightforward:

test("The menu popup closes when the option is selected", async () => {
  renderTestComponent();

  await userEvent.click(screen.getByRole("button"));
  await userEvent.click(screen.getByText("Import Data"));

  expect(screen.queryByText(textContentMatcher(/Import Data/))).toBeNull();
});

First I render the component, then I simulate clicking on the menu button followed by the "Import Data" option. These steps work without errors.

However, my assertion fails because "Import Data" is still found in the rendered screen. Shouldn't this clear out when the menu is closed?

If I move the assertion before the button is clicked, the test passes.

I suspect I am misunderstanding how the rendering is done. The actual code does work as expected, so this issue is related specifically to my understanding and implementation of the test.

How should I approach this test?

The code