'MUI ListItem with rounded corners and shadow

With MUIv5, trying to get menu items in a drawer to have more rounded corners along with a shadow. I'm sure I'm doing something wrong here, below is my attempt (and I also attempted setting borderRadius within & .MuiListItem-button)

  menu: {
    borderRadius: '0.5',
    padding: theme.spacing(1),
  },
  menuItem: {
    borderRadius: '0.5',
    width: 220,
  },
  menuItemIcon: {
    color: theme.palette.primary.dark,
  },
...

<List className={classes.menu}>
  <ListItem
    name="menu"
    button
    className={classes.menuItem}
    onClick={() => { handleClick('/home', 0); }}
    selected={selected}
  >
    <ListItemIcon className={classes.menuItemIcon}>
      <HomeIcon />
    </ListItemIcon>
    <ListItemText primary="Home" />
  </ListItem>
  <ListItem
    button
    className={classes.menuItem}
    onClick={() => { handleClick('/blog', 1); }}
    selected={selected}
  >
    <ListItemIcon className={classes.menuItemIcon}>
      <SubjectIcon />
    </ListItemIcon>
    <ListItemText primary="Blog" />
  </ListItem>
</List>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source