How to vertically center items in side Drawer component in Material UI?

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Drawer from "@material-ui/core/Drawer";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import Avatar from "@material-ui/core/Avatar";
import Grid from "@material-ui/core/Grid";
import Hidden from "@material-ui/core/Hidden";


const drawerWidth = 200;

const useStyles = makeStyles((theme) => ({
  appBar: {
    width: `calc(100% - ${drawerWidth}px)`,
    marginRight: drawerWidth,
    backgroundColor: "rgb(50, 50 ,50)",
  },
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
    alignItems: "center"
  },
  drawerPaper: {
    width: drawerWidth,
    backgroundColor: "rgb(50, 50 ,50)",
    alignItems: "center"

  },
  listItem: {
    color: "white",
    display: "flex",
    justifyContent: "flex-end",
    textAlign: "center",
  },
  avatar: {
    width: theme.spacing(7),
    height: theme.spacing(7),
  },
  // necessary for content to be below app bar
  toolbar: theme.mixins.toolbar,
  content: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.default,
    padding: theme.spacing(3),
  },
  navLink: {
    textDecoration: "none",
  },
}));

export default function PermanentDrawerRight() {
  const classes = useStyles();

  return (
    <Hidden smDown>
      <Drawer
        className={classes.drawer}
        variant="permanent"
        classes={{
          paper: classes.drawerPaper,
        }}
        anchor="left"
      >
              <Avatar
                alt="Avatar"
                src="/public/images/headshot.jpg"
                className={classes.avatar}
              />
              {["Home", "About", "Skills", "Projects"].map((text) => (
                  <a href={"#" + text} className={classes.navLink}>
                    <ListItem button className={classes.listItem} key={text}>
                      <ListItemText primary={text} />
                    </ListItem>
                  </a>
              ))}

      </Drawer>
      </Hidden>
  );
}