Framer Motion not updating zIndex with keyframes

Question

I am trying to animate a stack of cards where the active one slides out and comes on top of the other cards. To get the full effect, I need the z-index to change in the middle of the animation. It looks like the whole animation, including the end result shows that the property for the z-index is included in the animation, but the value never changes at any point.

Here is my code:

const variants = {
    top: { x: ['calc(0% + 0px)', 'calc(-100% - 10px)', 'calc(0% - 0px)'], zIndex: [0, 5, 5] },
    default: { x: 'calc(0% + ' + 5 * index + 'px)', y: 5 * index, zIndex: 1 },
  }
  return (
    <AnimatePresence>
      <motion.div
        key={key}
        variants={variants}
        animate={isActive ? 'top' : 'default'}
        transition={{ type: 'ease', duration: 1.5 }}
        style={{
          gridColumn: 1,
          gridRow: 1,
          position: 'relative',
        }}
      >
        {children}
      </motion.div>
    </AnimatePresence>
  )