Tengo un contenedor que muestra cada tarjeta dentro de la matriz de tarjetas. El problema es que parece que no puedo hacer que el contenedor se desplace a la nueva tarjeta cada vez que se agrega la matriz de tarjetas. Lo que sucede es que se desplaza, pero solo hasta la última tarjeta de la matriz, y no hacia la nueva tarjeta.

 <AnimatePresence> <div id="scrollContainer" scrollableX> { cards.length && cards.map(card => // The Card component is a motion.div <Card/> ) } </div> </AnimatePresence>

Intenté usar scrollLeft en Javascript, pero solo se desplaza a la última tarjeta (la tarjeta anterior a la tarjeta más nueva). El código era:

 const container = document.getElementById("scrollContainer"); container.scrollLeft = container.scrollWidth;