Как изменить стили одного элемента при наведение на другой ReactJs

const styles = theme => ({
    acch: {
        '&:hover': {
            backgroundColor: "rgb(0, 85, 135)",
            boxShadow: "-1px 3px 10px 6px rgb(0, 85, 135,0.4)",
            color: "white",
            exicon: {
                color: "white"
            }
        },
    },

});

Вот сам компонент

<Accordion style={{ width: "400px", borderRadius: "0px" }} className={classes.acch}>
                            <AccordionSummary
                                expandIcon={<ExpandMore className={classes.exicon}/>}
                                aria-controls="panel1a-content"
                                id="panel1a-header"
                            >
                                <Grid container xs={10} sm={8} md={10} lg={12}  justify="center" alignItems="center">
                                    <Grid container xs={10} sm={8} md={10} lg={6} style={{ textAlign: "center" }} justify="center" alignItems="center">
                                        <Typography variant="h6">
                                            {c.Name}
                                        </Typography>
                                    </Grid>
                                    <Grid container xs={10} sm={8} md={10} lg={6} justify="center" alignItems="center" style={{}}>
                                        <img src={c.Image == null ? "/images/default-image.png" : c.Image.Path} style={{maxHeight:"120px"}}  />
                                    </Grid>
                                </Grid>
                            </AccordionSummary>
                            <AccordionDetails>
                                    {c.ChildCategories == null ? "" : getAccord(c.ChildCategories)}
                            </AccordionDetails>
                        </Accordion>

exicon - это клас другого елемента, но он почему-то не применяеться при наведение, как это пофиксить?