How to change background color of iconbutton when onclick in material ui

Question

When I clicked IconButton the background color changed to an oval shape. I need to change the background color after onclick

CSS

CSS for IconButton. Changed the background color when hover. I need the same for onClick

const positionStyle = makeStyles(theme => ({
    paper: {
        backgroundColor: theme.palette.accent[100],
      },
      iconButton: {
        padding: "10px",
        margin: "0 5px 1px 0",
        "&:hover, &.Mui-focusVisible, &:active": {
          backgroundColor: theme.palette.accent[100],
        },
        "&$buttonDisabled": {
          color: theme.palette.accent[100],
        },
      },
    })

Material UI

<Paper className={classes.paper}>
    <Box display={"flex"} height={theme.spacing(2.3)}>
        <IconButton
         color={"inherit"}
         size={"small"}
         className={classes.iconButton}
         onClick={() => {
             history.push("/a")
         }}>
            <img src={"/static/images//a.svg"} />
            <Box pl={1} mt={"-4px"} maxWidth={theme.spacing(10)}>
                <Typography variant={"subtitle1"} component="p">
                    {" Hello"}
                </Typography>
            </Box>
        </IconButton>
    </Box>
</Paper>

Answer 1

as i read here Can I have an onclick effect in CSS? the best way to do this is a checkbox trick, other solutions are also on the page i linked

either if you have more liberty you can use JS

Have a good day