我正在关注Youtube上的一个React教程，在Index.JS/Home文件中的useEffect函数上卡住了。
这是YouTube视频的链接：https://www.youtube.com/watch?v=bmpI252DmiI&ab_channel=freeCodeCamp.org
我停留在30分钟左右的一部分，我试图使文字动画时，我悬停在他们。
当我运行npm start时，我的页面变成了空白，没有错误，只是index.js/home上没有任何东西出现在我的网站上，只有我的布局页面的海军蓝屏幕仍然存在。
这是导致以下情况的代码块：

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

下面是整个index.js文件的外观：

import { useEffect, useState } from 'react';
import{Link} from 'react-router-dom';
import LogoTitle from '../../assets/images/logo-s.png';
import AnimatedLetters from '../AnimatedLetters';
import './index.scss';

const Home = () => {
    // import Animated letters
    // state hook below
    const [letterClass, setLetterClass] = useState('text-animate')
    const nameArray = ['l','i','v','e',' ','R','e','n',',']
    const jobArray = ['a',' ','U','X',' ','D','e','s','i','g','n','e','r']

    // use animation from animated letters
    
    useEffect(() => {
        return setTimeout(() => {
            setLetterClass('text-animate-hover')
        }, 4000)
    },[])

// adjust logo in here
    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={LogoTitle} alt="developer"/> 
                <AnimatedLetters letterClass={letterClass}
                strArray={nameArray}
                idx={15}/>
                <br />
                <AnimatedLetters letterClass={letterClass}
                strArray={jobArray}
                idx={23}/>
                </h1>
                <h2>UX/UI / HCI / Frontend Developer</h2>
                <Link to="/contact" className='flat-button'>Don't Click this button</Link>
            </div>

        </div>
    )
}

export default Home

下面是索引.scss/AnimatedLetters代码：

.text-animate{
    display: inline-block;
    opacity: 0;
    animation: bounceIn 1s 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: #f67280;
    }
}

@for $i from 1 through 35{
    .text-animate._#{$i}{
        animation-delay: calc(#{$i / 10}s +1s);
    }
}

我的代码看起来和youtube上的视频一模一样，所以我真的很困惑。会不会是无限渲染循环的问题？