How do I change the zAxis of a Paper from MUI?

Hello I want to know how do you change the zAxis of a paper from MUI

As you can see the carousel overlaps my menu and I would like my menu to be on top of everything.

This is how I have it wrapped:

<Box sx={{ background: '#272A31', flexGrow: 0, display: { xs: 'none', md: 'flex' } }}>
          <StyledIconButton size="small" edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }} onClick={handleToggle} ref={anchorRef} >
              <GamesIcon />
              <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}> GAMES </Typography>
              <Popper open={open}  anchorEl={anchorRef.current} role={undefined} placement="bottom-start" transition disablePortal > 
              {({ TransitionProps, placement }) => (
                 <Grow {...TransitionProps}
                    style={{
                      transformOrigin: placement === 'bottom-start' ? 'left top' : 'left bottom',
                  }}
                >
                  <StyledPaper>
                    <ClickAwayListener onClickAway={handleClose}>
                      <MenuList autoFocusItem={open} id="composition-menu" aria-labelledby="composition-button" onKeyDown={handleListKeyDown}> 
                      <StyledMenuItem onClick={handleClose}>JUNGLE RAIDER</StyledMenuItem>
                      <StyledMenuItem onClick={handleClose}>MEGAMAN TEMPLATE</StyledMenuItem>
                      <StyledMenuItem onClick={handleClose}>TOWER DEFENSE</StyledMenuItem>
                      <StyledMenuItem onClick={handleClose}>BLADES AND DUNGEON</StyledMenuItem>
                      <StyledMenuItem onClick={handleClose}>FIXSPACE</StyledMenuItem>
                    </MenuList>
                  </ClickAwayListener>
              </StyledPaper>
            </Grow>
          )}
       </Popper>
    </StyledIconButton>
 </Box>