Why is timeout not working on this component? - material-ui

Question

I am using material ui on a react-typescript project and need the bio to be mostly hidden until the show more button is pressed. In the docs for Collapse from material-ui it says you can pass in a number value for timeout and it will determine the amount of time that the transition takes to expand the card. However, I have passed in a large number here and the transition still only takes less than a second. Should I be passing the timeout prop in differently?
export default function ProfileBio({ bio }: Props) {
const [expandBio, setExpandBio] = useState<boolean>(false);
const [animation, setAnimation] = useState({});
const classes = useStyles();
const [bioHeight, setBioHeight] = useState(classes.notExpanded);
// bio
const BIO = [
{
name: 'Bio',
icon: <IconStyle icon={fileTextOutline} />,
content: bio
}
];
const fields = [
{
name: 'bio',
content: bio,
displayName: 'Bio'
}
];
const handleExpandClick = () => {
setExpandBio(!expandBio);
};
const CurrentContent: Function = () => {
return BIO.map((bioField) => (
<DetailsWrapper key={bioField.name}>
<Collapse
sx={{ mt: 0 }}
collapsedSize={72}
in={expandBio}
easing="ease"
timeout={60000}
onEnter={() => console.log('entered')}
>
<Typography
variant="body2"
color="text.primary"
style={{ whiteSpace: 'pre-wrap' }}
// className={bioHeight}
>
{bioField.icon}
{bioField.content}
</Typography>
</Collapse>
</DetailsWrapper>
));
};
const ShowMoreButton: Function = () => {
if (!edit) {
return (
<ExpandMore
stretchedLink
expand={expandBio}
onClick={handleExpandClick}
aria-expanded={expandBio}
aria-label="show more"
>
<Typography variant="button">
show
{expandBio ? 'less' : 'more'}
</Typography>
<ExpandMoreIcon className="chevron" />
</ExpandMore>
);
}
return <Box />;
};
return (
<Card>
<CardHeader
title="Bio"
action={
<IconButton
onClick={() => {
setEdit(!edit);
}}
>
<CreateIcon />
</IconButton>
}
/>
<CardContent>
<CurrentContent />
</CardContent>
<Box
sx={{
display: 'flex',
justifyContent: 'center',
backgroundColor: '#FFFFFF'
}}
>
<ShowMoreButton />
</Box>
</Card>
);
}