React Material UI - Navbar Items Positioning Issue

Question

I am facing a issue while positioning the menu items in my Navbar component when screen size is small.

This is the view of normal screen.

On small screen, the view is like this:

There is an empty space between the Appbar and the menu. As per my knowledge this is due to flex properties. I tried to remove **flexGrow: 1** property from the styles. But this didn't work.

Here is my component code:

import {
  AppBar,
  Toolbar,
  Stack,
  Menu,
  MenuItem
} from '@mui/material'
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
import { MuiTypography } from '../typography/Typography'
import { MuiButton, MuiIconButton } from '../form-controls/Button'
import { useState } from 'react'
import { Link, useLocation } from 'react-router-dom'
import MenuIcon from '@mui/icons-material/Menu';

export const MuiNavbar = ({ title, logoIcon, navItems, handleTitleClick }) => {
  const location = useLocation();
  const navLinkStyles = (path) => {
    const isActive = location.pathname === path ? true : false;
    return {
      fontWeight: isActive ? 'bold' : 'normal',
    }
  }

  const [anchorNav, setAnchorNav] = useState(null);
  const openMenu = (e) => {
    setAnchorNav(e.currentTarget);
  }
  const closeMenu = () => {
    setAnchorNav(null);
  }


  return (
    <AppBar position='static' color='transparent'>
      <Toolbar variant="dense">
        <MuiIconButton size='large' edge='start' color='inherit' aria-label='logo' icon={logoIcon} onClick={handleTitleClick} sx={{ display: { xs: 'none', md: 'flex' } }} />
        <MuiTypography
          variant='h6'
          component='div'
          sx={{
            flexGrow: 1,
            display: { xs: 'none', md: 'flex' }
          }}
          text={title}
          onClick={handleTitleClick}
        />
        <Stack direction='row' spacing={2} sx={{ display: { xs: 'none', md: 'flex' } }}>
          {
            navItems.map(item => {
              return item?.hasSubMenu ? (
                <MuiNavSubMenu key={item.id} item={item} sx={navLinkStyles} />
              ) : (
                item?.type === "custom"
                  ? <MenuItem key={item.id}>{item.customComponent}</MenuItem>
                  : <MenuItem key={item.id} component={Link} to={item.to} sx={navLinkStyles(item.to)}>{item.title}</MenuItem>
              );
            })
          }
        </Stack>
        <Stack spacing={2} sx={{ display: { xs: 'flex', md: 'none' } }}>
          <MuiIconButton size='large' edge='start' color='inherit' icon={<MenuIcon />} onClick={openMenu} />
          <Menu open={anchorNav} onClose={closeMenu} sx={{ display: { xs: 'flex', md: 'none' } }}>
            {
              navItems.map(item => {
                return item?.hasSubMenu ? (
                  <MuiNavSubMenu key={item.id} item={item} sx={navLinkStyles} />
                ) : (
                  item?.type === "custom"
                    ? <MenuItem key={item.id}>{item.customComponent}</MenuItem>
                    : <MenuItem key={item.id} component={Link} to={item.to} sx={navLinkStyles(item.to)}>{item.title}</MenuItem>
                );
              })
            }
          </Menu>
        </Stack>
        <MuiTypography
          variant='h6'
          component='div'
          sx={{ display: { xs: 'flex', md: 'none' }}}
          text={title}
          onClick={handleTitleClick}
        />
      </Toolbar>
    </AppBar>
  )
}

This is the code for subcomponent MuiNavSubMenu

export const MuiNavSubMenu = ({ item }) => {
  const [anchorEl, setAnchorEl] = useState(null)
  const open = Boolean(anchorEl)
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget)
  }
  const handleClose = () => {
    setAnchorEl(null)
  }

  const location = useLocation();

  const navLinkStyles = (path) => {
    const isActive = location.pathname === path ? true : false;

    return {
      fontWeight: isActive ? 'bold' : 'normal',
    }
  }

  var itemId = item.id;
  var menuItemId = itemId + "-menu";

  return (
    <Stack direction="row" spacing={2}>
      <MuiButton
        key={itemId}
        id={itemId}
        color="inherit"
        aria-controls={open ? { menuItemId } : undefined}
        aria-haspopup="true"
        aria-expanded={open ? "true" : undefined}
        endIcon={<KeyboardArrowDownIcon />}
        onClick={handleClick}
        text={item.title}
        href={item.to}
      />
      <Menu
        key={menuItemId}
        id={menuItemId}
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "right",
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "right",
        }}
        MenuListProps={{
          "aria-labelledby": { itemId },
        }}
      >
        {
          item.subItems.map(i => {
            return i?.hasSubMenu ? (
              <MuiNavSubMenu key={i.id} item={i} sx={navLinkStyles} />
            ) : (
              <MenuItem key={i.id} component={Link} to={i.to} sx={navLinkStyles(i.to)} onClick={i.handleClose}>{i.title}</MenuItem>
            );


          })
        }
      </Menu>
    </Stack>
  );
}

Please help. Thanks & Regards

I tried to remove **flexGrow: 1** property from the styles. But this didn't work.