I am trying to create an infinite text cycle in React using FramerMotion, showing one word at a time, and cycling to the next word every three seconds. The code below works like a charm a lot of the time, but if I leave the page open, change some windows, do some other stuff, etc, and then come back, often multiple words from the words array are displayed on the page at the same time, and are overlapping one another. I have been wrestling with this for too long now, and can’t seem to figure out what makes this happen, or even how to trigger it happening. Anyone have any ideas??

This is my state to cancel the the animations.

I am getting some weather data and putting the hourly forecast into a list. What I want to happen is the list of hourlyForecastItems to animate a staggered fade-in when the list changes. This happens when you select a different day from the daily forecast.