[Popper] Placeholder text from `TextField` is appearing inside `Popper`

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When a Popper component is displayed above an TextField component, the place holder text of TextField is appearing inside the Popper.

Expected behavior 🤔

No content of the TextField component should appear on the Popper when Popper displays above TextField.

Steps to reproduce 🕹

Live Example: https://codesandbox.io/s/determined-black-85vufb?file=/demo.js

Steps:

1. Make sure the Popper displays above a TextField
2. Click on "Toggle Popper" button to display Popper.
3. See that placeholder text of TextField being displayed inside the Popper.

Context 🔦

I am trying to display a Popper to help the user when filling a form thus the issues with Popper and TextField.

Your environment 🌎

  System:
    OS: Linux 5.18 undefined
  Binaries:
    Node: 18.7.0 - /usr/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.15.1 - /usr/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: 103.0
  npmPackages:
    @emotion/react: ^11.9.3 => 11.9.3 
    @emotion/styled: ^11.9.3 => 11.9.3 
    @mui/base:  5.0.0-alpha.91 
    @mui/icons-material: ^5.8.4 => 5.8.4 
    @mui/material: ^5.9.2 => 5.9.2 
    @mui/private-theming:  5.9.1 
    @mui/styled-engine:  5.8.7 
    @mui/system:  5.9.2 
    @mui/types:  7.1.5 
    @mui/utils:  5.9.1 
    @types/react:  18.0.15 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript:  4.7.4 

I used Firefox. The issue is same with chromium based browsers.

Start with the linked CodeSandbox's demo.js and reproduce the issue with Popper displayed above TextField in Firefox or Chromium. Trace the Popper and TextField behavior in the Material UI source, then add or update coverage so the placeholder no longer appears inside the Popper.