Stacked card animation using FRAMER MOTION

Question

I'm currently working on a product where i created a stacked debit cards of users using the application using react js. So far i have been able to achieve swapping the cards which are stored in an array. i.e whenever a user clicks on anyone of the cards, it swaps its position with the one at the last index of the array. The issue is i've been trying to add an animation when this happens just to create a nice feel. So far its not working. Find below my code so far. I'm using Framer Motion btw

Method for swapping the cards:

const swapCards = (index: number) => {
      const lastCard = cards.length - 1
      const newCards = cards.slice()
      const temp = cards[index]
      newCards[index] = cards[lastCard]
      newCards[lastCard] = temp
      setCards(newCards)
}

Then using framer motion:

<div className="card-stack">
   {cards.map((card, index) => (
     <motion.div
       animate={{
         top: index * 75
       }}
       transition={{duration: 0.3}}
       className="deck" 
       key={index.toString()}
       onClick={() => swapCards(index)}
     >
       <img src={card.src} alt="" />
     </motion.div>
  ))}
</div>

I only see the animation effect when the component mounts. After that, it doesn’t animate when the cards swap. Help will be appreciated guys. Thanks in Advance