How do you change a style of a child when hovering over a parent using Material UI styles?

I'm using Material UI in react. Let's say I have this component with these styles:

const useStyles = makeStyles(theme => ({  outerDiv: {    backgroundColor: theme.palette.grey[200],    padding: theme.spacing(4),'&:hover': {      cursor: 'pointer',      backgroundColor: theme.palette.grey[100]   }  },  addIcon: (props: { dragActive: boolean }) => ({    height: 50,    width: 50,    color: theme.palette.grey[400],    marginBottom: theme.spacing(2)  })}));function App() {  const classes = useStyles();  return (<Grid container><Grid item className={classes.outerDiv}><AddIcon className={classes.addIcon} /></Grid></Grid>  );}

I want to change the style of addIcon when hovering over outerDiv using the styles above.

Here's my example.