I am using css to target [data-motion-pop-id] which is applied during a popLayout exit transition

  [data-motion-pop-id] {
    pointer-events: none;
    z-index: 1;
  }

If an element's popLayout exit transition is interrupted (by re-entering the element before the exit is complete), the [data-motion-pop-id] still persists. I think this should be removed when the exit transition is changed back to the animate state.

Ideally I want to do something like this

const presenceTransitions = {
  initial: { opacity: 0, zIndex: 1 },
  animate: { opacity: 1, zIndex: 1 },
  exit: { opacity: 0, zIndex: 0, pointerEvents: 'none' },
} as const

//I've also tried
export const presenceTransitions = {
  initial: { opacity: 0, zIndex: 1, pointerEvents: 'auto' },
  animate: { opacity: 1, zIndex: 1, pointerEvents: 'auto' },
  exit: { opacity: 0, zIndex: 0, pointerEvents: 'none' },
} as const

//NOTE: `layout` is applied, don't know if layout overwrites some styles
<motion.div layout {...presenceTransitions} />

But the zIndex and pointerEvents don't seem to apply at all. I don't know if it's because its a layout is applied and somehow the layout transition is overriding these.

Thanks