MUI: ExpansionPanel with TransitionComponent doesn't collapse the item - reactjs

Question

I'm using ExpansionPanel with TransitionComponent property, when I set default value (Collapse) expansion panel is working fine, but if value is another (Fade, Grow and others), collapsed component has same height as expanded
<ExpansionPanel
expanded={expanded === '1'}
onChange={handleChange('1')}
TransitionComponent={Slide}
TransitionProps={{ mountOnEnter: true }}
className={classnames('accordion-item', expanded === '1' && 'selected')}
>
UPD: there is a snippet https://codesandbox.io/s/vigorous-tree-621cz?fontsize=14&hidenavigation=1&theme=dark

Answer 1

There are two aspects needed to get the Slide transition working appropriately.
In order for the height to adjust appropriately you need to specify both mountOnEnter and unmountOnExit in the TransitionProps.
The other aspect to deal with is the timeout prop. Accordion (previously ExpansionPanel) specifies the timeout as "auto", but "auto" is only supported as a timeout value by Collapse so you need to specify a valid timeout for Slide. In my modified version of your sandbox, I'm using the default values for Slide of 225 for enter and 195 for exit.
Here's a working example:
import React, { useState } from "react";
import {
Accordion,
AccordionSummary,
AccordionDetails,
Slide
} from "#material-ui/core/";
const slideProps = {
mountOnEnter: true,
unmountOnExit: true,
timeout: { enter: 225, exit: 195 }
};
export default function App() {
const [expanded, setExpanded] = useState(null);
return (
<>
<Accordion
TransitionComponent={Slide}
TransitionProps={slideProps}
expanded={expanded === "1"}
onChange={() => setExpanded("1")}
>
<AccordionSummary aria-controls="panel1d-content" id="panel1d-header">
First
</AccordionSummary>
<AccordionDetails>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
lacus ex, sit amet blandit leo lobortis eget.
</AccordionDetails>
</Accordion>
<Accordion
TransitionComponent={Slide}
TransitionProps={slideProps}
expanded={expanded === "2"}
onChange={() => setExpanded("2")}
>
<AccordionSummary aria-controls="panel1d-content" id="panel1d-header">
Second
</AccordionSummary>
<AccordionDetails>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada
lacus ex, sit amet blandit leo lobortis eget.
</AccordionDetails>
</Accordion>
</>
);
}