React Material UI ListItems Vertical Align - reactjs

Question

I am trying to populate ListItems( ListItemIcon and ListItemText) on Material UI mini Drawer in vertical align mode. Some how my ListItemText not aligning properly to the ListItemIcons.
Here is my styles:
link: {
textDecoration: "none",
"&:hover, &:focus": {
backgroundColor: theme.palette.background.yellow
}
},
linkActive: {
backgroundColor: theme.palette.background.light
},
linkIcon: {
marginRight: theme.spacing(1),
marginBottom: theme.spacing(4),
color: theme.palette.text.secondary + "99",
transition: theme.transitions.create("color"),
width: 24,
display: "flex",
justifyContent: "center"
},
linkText: {
marginTop: theme.spacing(1),
color: theme.palette.text.secondary + "CC",
transition: theme.transitions.create(["opacity", "color"]),
fontSize: 13,
display: "flex",
justifyContent: "flex-end"
}
Component
import React from "react";
import {
ListItem,
ListItemIcon,
ListItemText,
} from "#material-ui/core";
import { Link } from "react-router-dom";
import classnames from "classnames";
// styles
import useStyles from "./styles";
export default function SidebarLink({
link,
icon,
label,
location,
}) {
var classes = useStyles();
var isLinkActive =
link &&
(location.pathname === link || location.pathname.indexOf(link) !== -1);
return (
<ListItem
button
component={link && Link}
to={link}
className={classes.link}
>
<ListItemIcon
className={classnames(classes.linkIcon, {
[classes.linkIconActive]: isLinkActive
})}
>
{icon}
</ListItemIcon>
<ListItemText
classes={{
primary: classnames(classes.linkText, {
[classes.linkIconActive]: isLinkActive
})
}}
primary={label}
></ListItemText>
</ListItem>
);
}
How to align ListItems in vertical mode properly? I tried adding textAlign and alignItems to center to linkText css class but not them worked.
Any Help is Appreciated
Thanks,

Answer 1

react-router-dom Link uses html < a > tag under the hood.
< a > children will be displayed in column as default.
You just need to style your link properly:
link: {
display: 'flex',
flexDirection: 'row',
textDecoration: "none",
"&:hover, &:focus": {
backgroundColor: theme.palette.background.yellow
}
},