I have a container that shows every card inside the cards array. The problem is that I can't seem to make the container scroll to the new card whenever the cards array is appended. What happens is that it does scroll, but only to the last card on the array, and not the new card.

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

I have tried using scrollLeft on Javascript, but it only scrolls to the last card (the card before the newest card). The code was:

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