How to test custom Context Menu closure when clicking outside of it

I'm trying to test the closure of my custom Context Menu when clicking outside of it, but it appears not working. What the best way to test it, and how to do it?

// MainMenu.tsx
type SectionElement = {
  title: string;
  key: string;
  icon?: JSX.Element;
  renaming?: boolean;
};

function MainMenu() {
  const [listSections, setListSections] = useState<SectionElement[]>([]);
  const [selectedSection, setSelectedSection] = useState<number>(-1);

  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const contextIsOpen = Boolean(anchorEl);

  function handleContext(
    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
    indexSelectedSection: number
  ) {
    event.preventDefault();
    setAnchorEl(event.currentTarget);
    setSelectedSection(indexSelectedSection);
  }

  function handleRemove() {
    /*
    ...
    */
    setDialogIsOpen(true);
    setAnchorEl(null);
  }

  function handleRename() {
    /*
    ...
    */
  }

  function handleClose() {
    setAnchorEl(null);
  }

  return (
    <div>
      <List>
        {listSections.map((oneSection, index) => (
          <ListItem
            button
            key={oneSection.key}
            onContextMenu={(event) => handleContext(event, index)}
          >
            {oneSection.renaming ? (
              <form noValidate autoComplete="off" onSubmit={handleSubmit}>
                <TextField
                  label="Nom de la section"
                  autoFocus
                  fullWidth
                  defaultValue={oneSection.title}
                  onChange={handleChange}
                />
              </form>
            ) : (
              <>
                <ListItemIcon>
                  <FormatListBulletedIcon />
                </ListItemIcon>
                <ListItemText primary={oneSection.title} />
              </>
            )}
          </ListItem>
        ))}
      </List>

      {contextIsOpen && (
        <Menu
          id="simple-menu"
          keepMounted
          open={contextIsOpen}
          anchorEl={anchorEl}
          onClose={handleClose}
        >
          <MenuItem onClick={handleRename}>
            <ListItemIcon>
              <BorderColorIcon />
            </ListItemIcon>
            <ListItemText primary="Rename" />
          </MenuItem>
          <MenuItem onClick={handleRemove}>
            <ListItemIcon>
              <DeleteForeverIcon />
            </ListItemIcon>
            <ListItemText primary="Remove" />
          </MenuItem>
        </Menu>
      )}
    </div>
  );
}

export default MainMenu;

// MainMenu.test.tsx
describe('<MainMenu />', () => {
  /*
  ...
  */

  test('`context menu` should vanish when clicking outside of it', async () => {
    render(<MainMenu />);
    fireEvent.click(screen.getByText(/Nouvelle Section/i));
    fireEvent.contextMenu(screen.getByText(/Section sans titre/i));

    expect(screen.queryByText(/Rename/)).toBeInTheDocument();
    expect(screen.queryByText(/Remove/)).toBeInTheDocument();

    fireEvent.click(screen.getByText(/My Daily/i));
    expect(screen.queryByText(/Rename/)).toBeNull();
    expect(screen.queryByText(/Remove/)).toBeNull();
  });
});

I already tested when clicking on Remove or Rename, and it works perfectly. So why My Daily is a list Item inside MainMenu. Hence, it is outside my contextMenu. When trying in a browser, it also works as intended, so I don't understand why I can't simulate it with react testing library.