Material UI stepper does not animate - reactjs

Question

I have a vertical stepper I'm using in Material UI to render a pricing calculator. The animation is no longer working. Previously, the stepper would animate a collapse effect when the steps changed.
I suspect it may be due to the nesting of multiple transitions, but I'm not entirely sure.
Relevant render method for the calculator is below. Thanks!
return (
<Grid container>
<Grid item xs={12} sm={12} md={8} className="nocPricingCalculatorContainer">
<Collapse in={activeStep < 2}>
<Stepper elevation={0} activeStep={activeStep} className="nocPricingCalculatorStepper" connector={<StepConnector classes={{ line: classes.stepConnector }} />} orientation="vertical">
{steps.map((stepObj, index) => {
return (
<Step key={uuidv4()}>
<StepLabel classes={{ label: classes.stepLabel }} StepIconProps={{
classes: { text: classes.stepLabelText }
}}>{stepObj.label}</StepLabel>
<StepContent className={classes.stepContentBorder}>
<div className={classes.actionsContainer}>
<Grid container item xs={12}>
{getStepContent(index)}
</Grid>
<div>
{
(activeStep !== 0) ?
<Button
className="nocButtonClear"
onClick={handleBack}>
Back
</Button> :
<div></div>
}
<Button
variant="contained"
onClick={handleNext}
className="nocButtonYellow"
disableRipple
>
{activeStep === steps.length - 1 ? 'Finish' : 'Next'}
</Button>
</div>
</div>
</StepContent>
</Step>
)
})}
</Stepper>
</Collapse>
<Collapse in={activeStep >= 2}>
{activeStep === steps.length && (
<Grid item container className="nocPricingCalculatorFinalStep" alignItems="center" justify="center">
<Grid item container xs={12} justify="center" className="nocPricingCalculatorResetArea">
<Grid item>
<Button className="nocButtonClear nocPricingCalculatorResetButton" disableRipple onClick={handleReset}>
<RefreshIcon className="nocResetIcon" />Reset calculator
</Button>
</Grid>
</Grid>
<Grid item container xs={12} justify="center" className="nocPricingCalculatorPriceArea">
<Grid item container alignItems="center" justify="center" xs={12} className="nocPriceColumnLabel">
<CheckCircle className="nocPriceAreaCheckIcon" />
<Typography className="nocPricingCalculatorPricingHeader">
{pricingSectionTitle}
</Typography>
</Grid>
<Grid item container className="nocPricingCalculatorPriceColumn left" alignItems="center" justify="center" xs={12} sm={12} md={6}>
<Grid item xs={12}>
<Typography className="nocPricingCalculatorPricingRepairType">
{pricingColumnLeft.title}
</Typography>
<Typography className="nocPricingCalculatorPricingPrice">
{pricingColumnLeft.price}
</Typography>
</Grid>
<Grid item>
<List dense={true}>
{generateRenderableList(pricingColumnLeft.details)}
</List>
</Grid>
</Grid>
<Grid item container className="nocPricingCalculatorPriceColumn right" alignItems="center" justify="center" xs={12} sm={12} md={6}>
<Grid item xs={12}>
<Typography className="nocPricingCalculatorPricingRepairType">
{pricingColumnRight.title}
</Typography>
<Typography className="nocPricingCalculatorPricingPrice">
{pricingColumnRight.price}
</Typography>
</Grid>
<Grid item>
<List dense={true}>
{generateRenderableList(pricingColumnRight.details)}
</List>
</Grid>
</Grid>
</Grid>
</Grid>
)}
</Collapse>
</Grid>
</Grid>
);
}

Answer 1

Never mind. I accidentally put a random UUID key on the Step and that caused the stepper to jump to the next step without animating.
#reactprobs