Material-UI: Prevent Accordion summary vertical movement

Question

Created this accordion and will use it as a menu item.

However, when I click Main title, accordion summary moves vertically downward.

How can I keep Main tile fixed while opening?

sandbox

import React from "react";
import {
  Typography,
  Grid,
  Accordion,
  AccordionSummary,
  AccordionDetails,
  ListItem
} from "@material-ui/core";
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    panelSummary: {
      flexDirection: "row-reverse",
      paddingLeft: "0px"
    },
    heading: {
      fontSize: theme.typography.pxToRem(15),
      fontWeight: theme.typography.fontWeightRegular
    },
    innerMenuItem: {
      paddingLeft: "32px"
    },
    expanded: {
      padding: "0px"
    }
  })
);

export default function App() {
  const classes = useStyles();
  return (
    <Accordion>
      <AccordionSummary
        className={classes.panelSummary}
        expandIcon={<ExpandMoreIcon />}
        aria-controls="panel1a-content"
        id="panel1a-header"
      >
        <Typography className={classes.heading}>Main title</Typography>
      </AccordionSummary>
      <AccordionDetails>
        <Grid container direction="column">
          <ListItem className={classes.innerMenuItem} button key={1}>
            <Typography className={classes.heading}>Sub Item 1</Typography>
          </ListItem>
          <ListItem
            className={classes.innerMenuItem}
            button
            key={2}>
            <Typography className={classes.heading}>Sub Item 2</Typography>
          </ListItem>
        </Grid>
      </AccordionDetails>
    </Accordion>
  );
}

Answer 1

You can just pass in disableGutters as true in version 5 of mui

<Accordion disableGutters>
 // ....
</Accordion>