Textfield select component inside Popper has wrong anchor in non-native mode

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:

1. https://github.com/codedthemes/berry-free-react-admin-template

2. Click on Notification Icon on the top right corner, and status select works OK in native-mode

3. Now apply the patch below

diff --git a/rmk/berry-free-react-admin-template/src/layout/MainLayout/Header/NotificationSection/index.js b/rmk/berry-free-react-admin-template/src/layout/MainLayout/Header/NotificationSection/index.js
index fcae30e429..d6a60d67ff 100644
--- a/berry-free-react-admin-template/src/layout/MainLayout/Header/NotificationSection/index.js
+++ b/berry-free-react-admin-template/src/layout/MainLayout/Header/NotificationSection/index.js
@@ -17,6 +17,7 @@ import {
     Popper,
     Stack,
     TextField,
+    MenuItem,
     Typography,
     useMediaQuery
 } from '@mui/material';
@@ -182,14 +183,11 @@ const NotificationSection = () => {
                                                                 fullWidth
                                                                 value={value}
                                                                 onChange={handleChange}
-                                                                SelectProps={{
-                                                                    native: true
-                                                                }}
                                                             >
                                                                 {status.map((option) => (
-                                                                    <option key={option.value} value={option.value}>
+                                                                    <MenuItem key={option.value} value={option.value}>
                                                                         {option.label}
-                                                                    </option>
+                                                                    </MenuItem>
                                                                 ))}
                                                             </TextField>
                                                         </Box>

4. Now click on the status select component. The overlay flys away.

Current behavior 😯

If SelectProps is not using native: true, the overlay flys away.

Expected behavior 🤔

No response

Context 🔦

No response

Your environment 🌎

  System:
    OS: macOS 10.15.7
  Binaries:
    Node: 16.15.1 - /usr/local/opt/node@16/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.13.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 110.0.5481.100
    Edge: Not Found
    Firefox: Not Found
    Safari: 13.1.3
  npmPackages:
    @emotion/react: ^11.8.1 => 11.10.0 
    @emotion/styled: ^11.8.1 => 11.8.1 
    @mui/base:  5.0.0-alpha.91 
    @mui/icons-material: ^5.8.4 => 5.8.4 
    @mui/lab: ^5.0.0-alpha.92 => 5.0.0-alpha.92 
    @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 
    @mui/x-date-pickers: ^5.0.0-beta.3 => 5.0.0-beta.3 
    @types/react: ^17.0.47 => 17.0.47 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^4.9.3 => 4.9.3 ```
</details>

Chrome 110.0.5481.100