How to reduce Material Toolbar height Material-UI?

I want to change(reduce) the default height of the toolbar from Material-UI

I already referred How do I change the Material UI Toolbar height? still I'm facing the problem

The thing is when I am increasing beyond like 50 , I can see changes. But when I want to decrease the height I am unable to.

How can I achieve this?

My Code :

const useStyles = makeStyles((theme) => ({
  root: {
    position: "relative",
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-end",
  },
  minHeight: {
    minHeight: "20px !important",
  },
}));

const AppHeader = () => {
  const toolbarSt = useStyles();
  return (
    <>
      <AppBar position="static">
        <Toolbar
          className={toolbarSt.minHeight}
          classes={{ regular: toolbarSt.regular, root: toolbarSt.root }}
        >
          <Typography> Home </Typography> 
          <Typography> About </Typography> 
        </Toolbar>
      </AppBar>
    </>
  );
};

This is due to the font size of <Typography> Home </Typography> and <Typography> About </Typography>
for exemple if you add style class to both Typography like this:

const useStyles = makeStyles((theme) => ({
  root: {
    position: "relative",
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-end",
  },
  minHeight: {
    minHeight: "5px !important",
  },
smallTypo:{
fontSize:"5px"
}
}));

const AppHeader = () => {
  const toolbarSt = useStyles();
  return (
    <>
      <AppBar position="static">
        <Toolbar
          className={toolbarSt.minHeight}
          classes={{ regular: toolbarSt.regular, root: toolbarSt.root }}
        >
          <Typography className={toolbarSt.smallTypo}> Home </Typography> 
          <Typography className={toolbarSt.smallTypo}> About </Typography> 
        </Toolbar>
      </AppBar>
    </>
  );
};

you can make a really small AppBar. here a codeSandeBox

You should set the minHeight property to the root element

const useStyles = makeStyles((theme) => ({
  root: {
    position: "relative",
    display: "flex",
    alignItems: "center",
    justifyContent: "flex-end",
    minHeight: "20px"
  }
}));

const AppHeader = () => {
  const toolbarSt = useStyles();
  return (
    <>
      <AppBar position="static">
        <Toolbar classes={{ root: toolbarSt.root }}>
          <Typography> Home </Typography>
          <Typography> About </Typography>
        </Toolbar>
      </AppBar>
    </>
  );
};

Please refer to the docs for more information https://material-ui.com/api/toolbar/#toolbar-api