React typing effect on 3 containers with strings

I’m trying to create a typing effect in React on 3 containers that are lined up and holding strings within them. The effect should start from the leftmost container after it finishes typing its string, it starts the container that comes after it, and so on.

I started with an idea where I store all the strings in an array and initialize a new array called currentText with a new letter every second but I probably just made things more complicated for myself.

Perhaps there is a simpler solution?

My complicated and not working solution looks like this:

    const [text, setText] = useState([]);
    const [currentIndex, setCurrentIndex] = useState(0);
    const [currentText, setCurrentText] = useState([]);


    // Setting Text Content For Typing
    useEffect(() => {
        if(log && log.length > 0 && text.length == 0){
            log.map((item, key) => {
                let time = item['time'];
                let message = item['message'];
                let event = item['eventid'];
                setText((prev) => [...prev, time, message, event]);
            });
        }
    }, [log, text]);


    useEffect(() => {
            if(currentText?.length < text?.length){
                const interval = setInterval(()=> {

                    // Setting Current index
                    if(currentText?.length !== 0 && currentIndex !== currentText?.length -1) {
                        setCurrentIndex(currentText?.length -1);
                    }
                    
                    // Check if the last index string completed
                    if(currentText[currentIndex]?.length !== text[currentIndex]?.length){
                        let temp = currentText;
                        let lastText = temp[currentIndex];
                        if(lastText) lastText = lastText + text[currentIndex].charAt(lastText?.length -1);
                        else lastText = text[currentIndex].charAt(0);
                        temp[currentIndex] = lastText;
                        setCurrentText(temp);
                    }
                    // If completed open new array element to contain new string
                    else{
                        setCurrentText((prev) => [...prev, ['']]);
                    }
            }, 1000);
            return () => clearInterval(interval);
            }

    }, [currentText, text, currentIndex]);


return (
    <>
       {
          currentText && currentText.length > 0 && 
                    currentText.map((item, key) => {
                            <div key={key} className={classes.row}>
                                <span className={classes.time}>{currentText[key]}</span>
                                <span className={classes.message}>{key % 1 ? currentText[key] : currentText[key+1]}</span>
                                <span className={classes.event}>{key % 2 ? currentText[key] : currentText[key+2]}</span>
                            </div>
                        })
        }