How can I have the Accordion row colors alternate between two colors?

I'm using ui material accordion to create a page. Here is a part of my code:

    root: {
        border: '5px solid rgba(0, 0, 0, .125)',
        boxShadow: 'none',
        '&:not(:last-child)': {
            borderBottom: 0,
        },
        '&:before': {
            display: 'none',
        },
        '&$expanded': {
            margin: 'auto',
        },
    },
    expanded: {},
})(MuiAccordion);

const AccordionSummary = withStyles({
    root: {
        backgroundColor: 'rgba(0, 0, 0, .08)',
        borderBottom: '1px solid rgba(0, 0, 0, .125)',
        marginBottom: -1,
        minHeight: 56,
        '&$expanded': {
            minHeight: 56,
        },
        fontSize: 14,
    },
    content: {
        '&$expanded': {
            margin: '12px 0',
        },
    },
    expanded: {},
})(MuiAccordionSummary);

const AccordionDetails = withStyles((theme) => ({
    root: {
        padding: theme.spacing(2),
    },
}))(MuiAccordionDetails);

const useStyles = makeStyles({
    headerTitle: {
        padding: '0 10px',
    },
    headerTitleTxt: {
        fontSize: 14,
        color: '#999'
    },
    headerItem: {
        fontSize: 14,        
        padding: '0 5px',
        color: '#333'
    },
    expandedPanel:{
        backgroundColor: '#C5CAE9'
    }
});

export default function ProjectAccordions(props) {
    const [expanded, setExpanded] = useState();
    const classes = useStyles();

    const handleChange = (panel) => (event, newExpanded) => {
        setExpanded(newExpanded ? panel : false);
    };

    return (
        <div>
            <Accordion square expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
                <AccordionSummary className={expanded === 'panel1' && classes.expandedPanel} aria-controls="panel1d-content" id="panel1d-header">
                    <Grid container direction="row"  alignItems="flex-start">
                        <Grid item xs={2}>
                            <Typography variant="button">Duration</Typography>
                        </Grid>
                        <Grid item xs={4}>
                            <Typography className={classes.headerItem} variant="subtitle1">xxx</Typography>
                        </Grid>
                        <Grid item xs={3} className={classes.headerTitle} container justify="flex-start" alignItems="center" direction="row">
                            <Typography className={classes.headerTitleTxt} variant="subtitle1">xxx</Typography>
                            <NumberFormat
                                className={classes.headerItem}
                                value=2
                                prefix={'$'}
                                type="text"
                                thousandSeparator={','}
                                displayType="text"
                                decimalScale={xxx>1000?0:2}
                            />
                        </Grid>
                        <Grid item container displayType='row' alignItems='center' xs={2} className={classes.headerTitle}>
                            <Typography className={classes.headerTitleTxt} variant="subtitle1">xxx: </Typography>
                            <Typography className={classes.headerItem} variant='subtitle1'>{xxx}</Typography>
                        </Grid>
                    </Grid>
                </AccordionSummary>
                <AccordionDetails>
                    <PropertyView prjData={xxx} onChangeData={props.onChangeData}/>
                </AccordionDetails>
            </Accordion>

How can I have the Accordion row colors alternate between two colors. For example blue color for odd accordion rows and green for even rows?

I want to do this dynamically and not manually by setting a special className to each row.

Thanks in advance