anchorEl issue with Popover after update to v7.3.8

[OlhaCherkasenko]

Steps to reproduce

After updating mui lib version from 7.3.7 to 7.3.8, we faced with failed tests. (vitest, react js)
Error is:
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.

In setupTests.ts, I'm trying to mock the Popover component like this:

const virtualAnchor: PopoverProps["anchorEl"] = {
  nodeType: 1,
  getBoundingClientRect: () => new DOMRect(0, 0, 100, 40),
};

// ------------------------------
// 2️⃣ Mock Popover globally
// ------------------------------
vi.mock("@mui/material/Popover", async () => {
  const actual = await vi.importActual<any>("@mui/material/Popover");

  return {
    ...actual,
    default: (props: PopoverProps & { anchorEl?: any }) => {
      const safeAnchorEl = process.env.NODE_ENV === "test" ? virtualAnchor : props.anchorEl;
      return React.createElement(actual.default, { ...props, anchorEl: safeAnchorEl }, props.children);
    },
  };
});

It doesn't work, the issue still present and tests are failed.
Only one thing that helps is to change anchorEl directly in the component, but I cannot do accross all project and also in selects components that are using popover under the hood.

Test example:
ProfilePersonCard under the hood uses Menu:

it("renders edit menu for avatar", async () => {
   MockUseGetPersonGeneralDetails.mockReturnValue({
     data: generalInfo,
     isFetching: false,
   } as unknown as HorizonQueryResult<PersonGeneralInfoViewDto>);

   vi.mocked(useParams).mockReturnValue({ personId: "personId1" });

   const { container, getByRole, getAllByRole } = render(<ProfilePersonCard editable={true} />);

   const editBtn = container.querySelector("#EditProfilePictureButtonId");
   expect(editBtn).toBeInTheDocument();

   const icons = ["fa-upload", "fa-trash-can"];
   const menuItemTexts = ["action.uploadPhoto", "action.deletePhoto"];

   if (editBtn) {
     fireEvent.click(editBtn);
     await waitFor(() => {
       const menu = getByRole("menu");
       const menuItems = getAllByRole("menuitem");
       expect(menu).toBeInTheDocument();
       expect(menuItems).toHaveLength(2);

       for (const [index, menuItem] of menuItems.entries()) {
         const svg = menuItem.querySelector("svg");
         const text = menuItem.querySelector(".MuiTypography-root");
         expect(svg).toHaveClass(icons[index]);
         expect(text).toHaveTextContent(getRendered(menuItemTexts[index]));
       }
     });
   }
 });

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: anchorEl, Popover, issue

[linear]

MAT-1774

[ZeeshanTamboli]

Duplicate of #47792 which was resolved in #47813