React - Framer motion: prevent initial prop from triggering - reactjs

Question

I have a basic CRUD application where I'm able to add and remove items on a list, which is animated. This works well with framer-motion, but I'm having troubles with the following:
Whenever I delete an item from the list, the following function is called:
const handleDeleteFormation = async (id) => {
await axios({
method: "DELETE",
url: `http://localhost:1337/formations/${id}`
})
getFormations()
}
As you can clearly see, I'm calling the getFormations() function after the deletion to re-render the updated list:
async function getFormations() {
const res = await axios.get('http://localhost:1337/formations')
setFormations(res.data)
console.log(res.data)
}
This will results in a re-render of the list, which is good. But... right after the re-render, the initial prop of the motion.div will be triggered again which results in conflicting visuals.
<AnimatePresence exitBeforeEnter initial={false}>
{formations && formations.map((formation, index) =>
<motion.div
key={formation.id}
initial={{ opacity: 0, x: -10 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -10 }}
transition={{ type: "tween", ease: 'easeOut', duration: 0.2 }}
>
...
My question: is it possible to prevent the initial prop from triggering right after the list-update?

Answer 1

You're looking for <AnimatePresence initial={false}>.
From the docs:
Suppressing initial animations
By setting initial={false} on AnimatePresence, components present when
AnimatePresence first loads will start in their animate state. Only
components that enter after this initial render will animate in.