React Material Expandable Panel не показывает эффект перехода

Question

Я пытаюсь создать динамически расширяемую пани. c это работает, но эффект перехода исчезает, когда расширяется.

Как установить эффект перехода таким же, как обычный?

function LocationList () {

  const [expanded, setExpanded] = React.useState(false);
  const classes = useStyles();
  const [points, setPoints] = React.useState([]);


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

  const ListPanel = (props) => (
    <ExpansionPanel
      sqaure
      key="p1"
      expanded={props.expanded === "panel1"}
      onChange={props.handleChange("panel1")}
    >
      <ExpansionPanelSummary
        expandIcon={<ExpandMoreIcon />}
        id="panel1bh-header"
        aria-controls="panel1bh-content"
      >
        Hello
      </ExpansionPanelSummary>
      <ExpansionPanelDetails>
        <Typography>Some more text</Typography>
      </ExpansionPanelDetails>
    </ExpansionPanel>

  );

  return(
    <div>

Эта панель не имеет эффекта перехода

      <ListPanel  expanded={expanded} handleChange={handleChange}/>

Эта панель работает правильно

      <ExpansionPanel square expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
          <ExpansionPanelSummary aria-controls="panel1d-content" id="panel1d-header" expandIcon={<ExpandMoreIcon />}>
              <div>Normal Transition</div>
          </ExpansionPanelSummary>
          <ExpansionPanelDetails>
            <Typography>Some more text</Typography>
          </ExpansionPanelDetails>
    <       /ExpansionPanel>
    </div>
  );    
}

export default LocationList;

Я не знаю настройки второй панели Я просто использую переход материала по умолчанию для пользовательского интерфейса. так что если мне нужно установить переход для первой панели. Что это должно быть?