Mui's Transition animation problem on item's position change within a list

Based on a Mui's TransitionGroup example I've tried to implement the transition of an item's position upon clicking. Functionally it does work, as the selected element is being moved to the top of the list, but unfortunately without the transition effect. What am I doing wrong and what would be the simplest approach of achieving animated movement upon item's position change in the list?

import * as React from "react";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Collapse from "@mui/material/Collapse";
import IconButton from "@mui/material/IconButton";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemText from "@mui/material/ListItemText";
import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
import { TransitionGroup } from "react-transition-group";
import Container from "@mui/material/Container";
const FRUITS = [
"Apple",
"Banana",
"Pineapple",
"Coconut",
"Watermelon",
"Grapes",
"Orange",
];
interface RenderItemOptions {
item: string;
handleRemoveFruit: (item: string) => void;
}
function renderItem({ item, handleRemoveFruit }: RenderItemOptions) {
return (
<ListItem
secondaryAction={
<IconButton onClick={() => handleRemoveFruit(item)}>
<ArrowUpwardIcon />
</IconButton>
}
>
<ListItemText primary={item} />
</ListItem>
);
}
export default function TransitionGroupExample() {
const [fruitsInBasket, setFruitsInBasket] = React.useState(
FRUITS.slice(0, 3)
);
const handleAddFruit = () => {
const nextHiddenItem = FRUITS.find((i) => !fruitsInBasket.includes(i));
if (nextHiddenItem) {
setFruitsInBasket((prev) => [nextHiddenItem, ...prev]);
}
};
const handleRemoveFruit = (item: string) => {
setFruitsInBasket((prev) => {
return [prev.find((i) => i === item)!, ...prev.filter((i) => i !== item)];
});
};
const addFruitButton = (
<Button
variant="contained"
disabled={fruitsInBasket.length >= FRUITS.length}
onClick={handleAddFruit}
>
Add fruit to basket
</Button>
);
return (
<Container maxWidth="xs">
{addFruitButton}
<Box sx={{ mt: 1 }}>
<List>
<TransitionGroup>
{fruitsInBasket.map((item) => (
<Collapse key={item}>
{renderItem({ item, handleRemoveFruit })}
</Collapse>
))}
</TransitionGroup>
</List>
</Box>
</Container>
);
}

I was able to figure out the workaround to this problem, as the addition and removing the list's elements worked perfectly fine. In the following implementation upon clicking an up arrow the element is removed just as well as in the Mui's example. Later on, using the callback Collapse.onExited the element is simply inserted back to the list again upon which the correct animation transition is performed.

import * as React from "react";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Collapse from "@mui/material/Collapse";
import IconButton from "@mui/material/IconButton";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemText from "@mui/material/ListItemText";
import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
import { TransitionGroup } from "react-transition-group";
import Container from "@mui/material/Container";
const FRUITS = [
"Apple",
"Banana",
"Pineapple",
"Coconut",
"Watermelon",
"Grapes",
"Orange",
];
interface RenderItemOptions {
item: string;
handleRemoveFruit: (item: string) => void;
}
function renderItem({ item, handleRemoveFruit }: RenderItemOptions) {
return (
<ListItem
secondaryAction={
<IconButton onClick={() => handleRemoveFruit(item)}>
<ArrowUpwardIcon />
</IconButton>
}
>
<ListItemText primary={item} />
</ListItem>
);
}
export default function TransitionGroupExample() {
const [fruitsInBasket, setFruitsInBasket] = React.useState(
FRUITS.slice(0, 3)
);
const handleAddFruit = () => {
const nextHiddenItem = FRUITS.find((i) => !fruitsInBasket.includes(i));
if (nextHiddenItem) {
setFruitsInBasket((prev) => [nextHiddenItem, ...prev]);
}
};
const handleRemoveFruit = (item: string) => {
setFruitsInBasket((prev) => {
return [...prev.filter((i) => i !== item)];
});
};
const addFruitButton = (
<Button
variant="contained"
disabled={fruitsInBasket.length >= FRUITS.length}
onClick={handleAddFruit}
>
Add fruit to basket
</Button>
);
return (
<Container maxWidth="xs">
{addFruitButton}
<Box sx={{ mt: 1 }}>
<List>
<TransitionGroup>
{fruitsInBasket.map((item) => (
<Collapse
key={item}
onExited={() => setFruitsInBasket((prev) => [item, ...prev])}
>
{renderItem({ item, handleRemoveFruit })}
</Collapse>
))}
</TransitionGroup>
</List>
</Box>
</Container>
);
}