framer-motion: element stops animating when changing state the 3rd time - reactjs

Question

Whenever addStory() is called, it displays and animates text, but on the 3rd time it only displays the text and not animate it. I tried changing the text and when I hit Ctrl S it animated it. How do I keep animating them whenever they are shown? I've been trying to solve this problem since yesterday but could not find a solution.
sandbox https://codesandbox.io/s/frosty-smoke-nt0we?file=/src/components/Game.tsx
ps: addStory() displays different text whenever it is called, so it should re-render and animate.
const addStory = (newStory: string) => {
setStory(
<>
{newStory === undefined ? (
<span>{story}</span>
) : (
<>
{newStory.split('\n').map((str, index) => (
<motion.p
key={index}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 1 }}
>
{str.length > 1 && '=> '}
{str}
</motion.p>
))}
</>
)}
</>
);
};
the addStory() function is called like this
const whichChoice = () => {
if (choice === 'a1') {
return mainStory.a1;
} else if (choice === 'a2') {
return mainStory.a2;
} else if (choice === 'b1') {
return mainStory.b1;
} else if (choice === 'b2') {
return mainStory.b2;
} else if (choice === 'c1') {
return mainStory.c1;
} etc......
else return;
};
useEffect(() => {
const narrate = whichChoice();
addStory(narrate);
}, [choice]);
the choice is changed using onClick via useState hook
the mainStory.a1 etc, returns a string from an object. It looks like this:
export const mainStory: any = {
a: '=> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor',
a1: '\n Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.',
a2: '\n nisi ut aliquip ex ea commodo consequat',
b1: '\n Duis aute irure dolor in reprehenderit \n in voluptate velit esse cillum dolore eu fugiat nulla pariatur \n Excepteur sint occaecat cupidatat non proident',
b2: '\n sunt in culpa qui officia \n deserunt mollit anim id est laborum. \n Sed ut perspiciatis unde omnis iste natus \n voluptatem accusantium doloremque laudantium'
etc...
}

Answer 1

I think the duration property in motion.p indicates that the animation runs from 0secs to 1secs. You might be looking for transition={{yoyo: 10}}
EDIT
Just understood, that its not triggering on consecutive renders, it seems the react DOM tree gets updated with each state change, for this, Framer needs an AnimatePresence to inform framer that the tree has changed.
Reference : https://www.framer.com/docs/animate-presence/