useAnimate not recognizing dynamically created elements

[tushardate]

I'm am using the React Split Text library to break my text into lines, words. I want to be able to animate each line or word in a staggered fashion. I managed to do that with motion components. But I have a need to have more control on how I sequence the animation. That's where the need for useAnimate comes in. I have defined the scope to a parent div of the split text. But when I use a class that is applied to the split lines/words in the animate function I get a "No valid elements provided" error.
Has anyone else come across a similar issue? How did you solve it?
Sample Code Link Here.
Page 1 is the standard usage of useAnimate
Page 2 is where I am using the Split Text. It doesn't recognize the split lines.
https://tushardate-vigilant-zebra-wvx4jj9xpw5c56qp.github.dev/