I have weird problem with MUI Menu component and anchorEl.

There are two lists on the page:

• The first list is a simple row-aligned list of <Button>Icon<Button/> components.
• Next to it, there’s a <Menu/> component that contains <MenuItem><Button>Icon<Button/></MenuItem> items.

When a button is clicked, it moves icon from one list to the other. If the <Menu/> has no items, it doesn’t appear on the page.

The issue:
When the <Menu/> is empty and hidden, clicking a button from the first list moves icon to the <Menu/> list. However, instead of the <Menu/> appearing normally, a <MenuItem/> incorrectly shows up in the top left corner, and an error is logged in the console. The expected behavior is for the <Menu/> to appear normally when the first icon is added to it’s list without showing it’s yet.

Shown error:

MUI: The anchorEl prop provided to the component is invalid. The
anchor element should be part of the document layout. Make sure the
element is present in the document or that it’s not display none.

Codesandbox with reproduced bug