Помогите разобраться с наложением элементов в react приложении

Всем привет. На данный момент я занимаюсь своим учебным проектом - небольшая соц. сеть. И, на главное странице я хочу сделать ленту новостей в 2 столбца. У меня это в целом, получилось. Но потом начали возникать вопросы с тем, как сделать посты с большим количеством текста красиво разворачивающимися при нажатии на кнопку. В целом, это я тоже сделал. Но проблема в том, что когда элемент разворачивается, то он оказывается ниже(в плане слоя), чем последующие(видно на картинке). С этим я тоже придумал что делать. Я просто передаю в стили(делаю при помощи material ui) переменную, от которой и зависит zIndex элемента. Но, дело в том, что когда я нажимаю на кнопку второй раз, чтобы свернуть все назад, переменная меняется мгновенно и, получается, что анимация сворачивания происходит уже под другими элементами. И, вопрос состоит в том, можно ли как-то сделать так, чтобы элементы, которые находятся первыми в массиве postList и вставляются, как бы первыми, были над теми, которые находятся после них. Сейчас ситуация обратная. Ну или, мб, вы предложите другое решение.

Когда элемента.

const useStyles = makeStyles(theme => ({
wrapper: {
    position: 'relative',
    minHeight: theme.spacing(64),
},
card: expanded => ({
    position: 'absolute',
// Вот здесь применяются стили для zIndex
    zIndex: expanded && 1,
}),}))

const PostItem = ({postItem}) => {
    // При нажатии на кнопку меняется значение переменной expanded и передается в useStyles
    const [expanded, setExpanded] = useState(false);
    const styles = useStyles(expanded);

const handleExpandClick = () => {
    setExpanded(e => !e);
}

return (
    <div className={styles.wrapper}>
        <Card className={styles.card}>
            <CardHeader
                avatar={
                    <Avatar aria-label="recipe">
                        D
                    </Avatar>
                }
                title={postItem.author.name}
                subheader={postItem.date}
            />
            <CardMedia
                style={{height: 0, paddingTop: '56.25%'}}
                image={postItem.url}
            />
            <CardContent>
                <Collapse in={expanded} timeout="auto" collapsedHeight={90} className={styles.moreText}>
                    <CardContent>
                        <Typography>
                            {postItem.text}
                        </Typography>
                    </CardContent>
                </Collapse>
            </CardContent>
            <CardActions disableSpacing>
                <IconButton aria-label="add to favorites">
                    <FavoriteIcon/>
                </IconButton>
                <IconButton aria-label="share">
                    <ShareIcon/>
                </IconButton>
                <IconButton
                    onClick={handleExpandClick}
                    aria-expanded={expanded}
                    aria-label="show more"
                >
                    <ExpandMoreIcon/>
                </IconButton>
            </CardActions>
        </Card>
    </div>
);};

Компонент, куда вставляются все эти PostItem элементы.

const Home = ({posts}) => {
const postList = posts.map(postItem => <Grid item lg={6} md={6} sm={9} xs={12}>
    <PostItem postItem={postItem}/>
</Grid>)

return (
    <Grid justify={"center"} container spacing={2}>
        {postList}
    </Grid>
);};