Make an array of text animate after the render And has a bug with useEffect

My main objective is to make an array of text animate after the render so I used useEfect with setTimeout as a return value, but the result is just the background color only, without the sidebar or home page text that appears without using useEffect. Does anyone have a solution?

Home.js

import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import AnimatedLetter from '../AnimatedLetters'
import H from '../../assets/images/H.png'
import './index.scss'

const Home = () => {
    const [LetterClass, setLetterClass] = useState('text-animate')
    const nameArray = ['a', 'y', 't', 'h', 'a', 'm']
    const jobArray = ['w', 'e', 'b', ' ', 'd', 'e', 'v', 'e', 'l', 'o', 'p', 'e', 'r', '.']

    useEffect(() => {
        return setTimeout(() => {setLetterClass('text-animate-hover')}, 4000)}, [])

    return (
        <div className='container home-page'>
            <div className='text-zone'>
                <h1>
                <span className={LetterClass}>H</span>
                <span className={`${LetterClass} _12`}>i,</span>
                <br/>
                <span className={`${LetterClass} _13`}>I</span>
                <span className={`${LetterClass} _14`}>'m</span>
                <img src={H} alt='logo-name'/>
                <AnimatedLetter 
                LetterClass={LetterClass}
                strArray={nameArray}
                idx = {6} />
                <br />
                <AnimatedLetter 
                LetterClass={LetterClass}
                strArray={jobArray}
                idx = {14} />
                </h1>
                <h2>Frontend Developer &amp; Javascript Expert</h2>
                <Link to='/contact' className='flat-button'>CONTACT ME!</Link> 
            </div>
        </div>
    )
}

export default Home 

AnimatedLetters.js

import './index.scss'

const AnimatedLetters = ({ letterClass, strArray, index }) => {
    return (
        <span>
        {strArray.map((char, i) => (
            <span key={char + i} className={`${letterClass} _${i + index}`}>
                {char}
            </span>
        ))}
        </span>
    )
}

export default AnimatedLetters

AnimatedLetter.scss

.text-animate {
    display: inline-block;
    opacity: 0;
    animation: bounceIn;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    min-width: 10px;
  }
  
  .text-animate-hover {
    min-width: 10px;
    display: inline-block;
    animation-fill-mode: both;
  
    :hover {
      animation: rubberBand 1s;
      color: #ffd700;
    }
  }
  
    @for $i from 1 through 35 {
    .text-animate._#{$i} {
      animation-delay: #{$i / 10}s;
    }
  }