如何在React/MUI中实现“Squishy Slide”软弹滑动动画？

我需要实现一组列表项的动画效果：页面首次加载时，列表项依次快速向上滑入，到达最终位置后轻微纵向收缩——类似枕头堆掉落或者一摞熟食肉片堆叠的效果。

以下是我的初步尝试代码：

import { Button, Slide, Stack, StackProps } from '@mui/material'
import { Box } from '@mui/system'
import { useState, useEffect, PropsWithChildren } from 'react'

interface ZoomStackProps extends PropsWithChildren<StackProps> {
    timeout: number
}

export default function SquishSlideStack({ children, timeout, ...stackProps }: ZoomStackProps) {

    const [mountIndex, setMountIndex] = useState(0)
    const [squozeIndex, setSquozeIndex] = useState(0)

    function increment(n: number) {
        if (n < React.Children.count(children) - 1) {
            setMountIndex(n)
            setTimeout(() => increment(n + 1), timeout)
        }
    }

    useEffect(() => increment(1), [])

    return (
        <Stack {...stackProps}>
            <Button onClick={() => setMountIndex(index => index + 1)}>Next</Button>
            {React.Children.map(children, (child, i) =>
                i > mountIndex ? (
                    null
                ) : (
                    <Slide
                        key={i}
                        in={true}
                        direction='up'
                        timeout={1000}
                        addEndListener={() => setSquozeIndex(i)}
                    >
                        <Box bgcolor='green'
                             width={600}
                             height={50}
                             sx={{
                                  transform: i > squozeIndex ? 'scale(1, 1.5)' : 'scale(1, 1)',
                                  transition: 'transform 2s ease'
                             }}
                        >
                            {child}
                        </Box>
                    </Slide>
                )
            )}
        </Stack>
    )
}

目前去掉缩放/收缩逻辑后，滑动功能基本可用，但添加该部分后，滑动功能失效且缩放效果异常。请问在React（优先使用MUI）中实现此类动画的最佳方式是什么？

内容的提问来源于stack exchange，提问作者Sasgorilla