[Menu] ownerState is undefined when the Menu is opened

[takakobem]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

You can check here. When you click DASHBOARD button and error occurs.
https://codesandbox.io/s/amazing-dubinsky-pkesu9?file=/index.js

Current behavior 😯

TypeError occurs.

paper
/index.js:20:31
  17 | styleOverrides: {
  18 |   paper: ({ ownerState }) => ({
  19 |     marginTop:
> 20 |       ownerState.anchorOrigin?.vertical === "bottom" &&
     |                 ^
  21 |       ownerState.transformOrigin?.vertical === "top"
  22 |         ? "4px"
  23 |         : 0

Expected behavior 🤔

no error occurs and can access ownerState.

Context 🔦

I created custom theme for MuiMenu to change the style.

Your environment 🌎

CodeSandbox

[siriwatknp]

ownerState is missing in Popover.

diff --git a/packages/mui-material/src/Popover/Popover.js b/packages/mui-material/src/Popover/Popover.js
index f35d551f64..15812e8ede 100644
--- a/packages/mui-material/src/Popover/Popover.js
+++ b/packages/mui-material/src/Popover/Popover.js
@@ -374,6 +374,7 @@ const Popover = React.forwardRef(function Popover(inProps, ref) {
           {...PaperProps}
           ref={handlePaperRef}
           className={clsx(classes.paper, PaperProps.className)}
+          ownerState={ownerState}
         >
           {children}
         </PopoverPaper>

[kabernardes]

Hi, can I try this one?

[siriwatknp]

Hi, can I try this one?

Absolutely!

[mnajdova]

This is an important thing that should be resolved in v6. I remembered we had a discussion around it in #31982.

It's the third time we are seeing similar issue.