Tengo un componente de lista que periódicamente recibe una nueva entrada. Cuando hay una nueva entrada, quiero que los otros componentes se deslicen suavemente hacia abajo a medida que nuestro nuevo elemento se desliza en su lugar. No puedo entender cómo hacer que los elementos de la lista existente se deslicen hacia abajo: se ajustan directamente a sus nuevas posiciones. ¿Alguien puede ofrecer alguna orientación? He adjuntado un entorno limitado de código que espero muestre claramente mi problema. Intente agregar un nuevo elemento: el nuevo elemento se animará, pero no los existentes. ¡Gracias!

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