How to have different color for alternate row for MUI v4 Table?

Below are my code. I tried setting the tableRowRoot in the style.js but the row background color for alternate row did not change. I hope to just set the root for table row so I do not need to add any class or logic to the rows etc. Hope you guys can show me the correct way to do this.

import { makeStyles } from '@material-ui/core/styles';

export default makeStyles((theme) => ({
  tableRowRoot: {
    '&:nth-of-type(odd)': {
      backgroundColor: theme.palette.action.hover,
    },
  },
}));

import useStyles from './styles';

const Event = ({ pendingEvents, handleUpdateEvent }) => {
  const classes = useStyles();

  return (
    <Container className={classes.content}>
      <div className={classes.toolbar} />
      <Typography className={classes.title} variant='h3' gutterBottom>
        List of Pending Request
      </Typography>
      <TableContainer component={Paper}>
        <Table className={classes.table} aria-label='simple table'>
          <TableHead>
            <TableRow>
              <TableCell className={classes.th}>Email</TableCell>
              <TableCell className={classes.th}>Name</TableCell>
              <TableCell className={classes.th}>Reason</TableCell>
              <TableCell className={classes.th}>Start Date</TableCell>
              <TableCell className={classes.th}>End Date</TableCell>
              <TableCell className={classes.th}>Approve / Reject</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {pendingEvents.map((event) => (
              <TableRow key={event.id}>
                <TableCell component='th' scope='row'>
                  {event.email}
                </TableCell>
                <TableCell>{event.name}</TableCell>
                <TableCell>{event.reason}</TableCell>
                <TableCell>{new Date(event.start).toDateString()}</TableCell>
                <TableCell>{new Date(event.end).toDateString()}</TableCell>
                <TableCell>
                  <IconButton
                    aria-label='Approve'
                    color='inherit'
                    onClick={() => handleUpdateEvent(event, 'approved')}
                  >
                    <ThumbUpIcon color='primary' />
                  </IconButton>
                  <IconButton
                    aria-label='Reject'
                    color='inherit'
                    onClick={() => handleUpdateEvent(event, 'rejected')}
                  >
                    <ThumbDownIcon color='secondary' />
                  </IconButton>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </Container>
  );
};

export default Event;