Why is timeout not working on this component?

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&nbsp;
            {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>
  );
}