Framer-motion exit animation not firing
The exiting elements need to be direct children of the <AnimatePresence>
tag.
Your sandbox doesn't run here, so I can't verify the solution, but it should work if you change your structure from this:
<AnimatePresence>
<NotificationContext>
<div id="notificationCenter">
<motion.div key={notification.id} />
</div>
</NotificationContext>
</AnimatePresence>
to this:
<NotificationContext>
<div id="notificationCenter">
<AnimatePresence>
<motion.div key={notification.id} />
</AnimatePresence>
</div>
<NotificationContext>