Material UI Megamenu Slide transition locking out further interaction

Question

I tried to implement a slide transition for my megamenu I created using Material UI. However, when I created it and tested it out, I was locked out of any further interaction with the page after I closed the Megamenu.

const Header = () => {
  const [anchorEl, setAnchorEl] = useState(null);
  const open = Boolean(anchorEl);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

(/*these were the functions I created, below you will find the actual megamenu*/)
 <Menu
                  id="Company-options"
                  anchorEl={anchorEl}
                  open={open}
                  onClose={handleClose}
                  TransitionComponent={(props) => (
                    <Slide direction='down' unmountOnExit={true} {...props} />
                  )}
                  MenuListProps={{
                    'aria-labelledby': 'Company-Button',
                  }}
                  PaperProps={{
                    sx: {
                      width: "100vw", 
                      height: "50%",
                      backgroundColor: '#f4f4f4',
                      position: "absolute",
                      marginTop: '2px',
                      zIndex: 1300,   
                    }
                  }}
                >

`

Above, you will see I tried to add unmountOnExit to see if that removed the locked out state. It still had the same result. I also attempted to change out the width and the height, or by removing position absolute, but that too did not do anything. Any help will be appreciated.

Thanks!

Answer 1

In order to passing props to TransitionComponent, you have to use TransitionProps.

<Menu
    // ...
    TransitionComponent={Slide}
    TransitionProps={{
        direction: 'down',
        unmountOnExit: true,
    }}
    // ...
>
    {/* ... */}
</Menu>

Reference: https://mui.com/material-ui/api/popover/#popover-prop-TransitionProps