I have a list component which periodically gets a new entry. When there is a new entry I want the other components to smoothly slide down as our new item slides into place. I can't figure out how to get the existing list items to slide down - they snap straight into their new positions. Can anybody offer any guidance? I have attached a code sandbox that I hope shows my problem clearly. Try adding a new item - the new item will animate, but not the existing ones. Thanks!

https://codesandbox.io/s/dazzling-hamilton-nidz3?file=/src/components/ListItem.jsx