React 翻转卡无法正常工作

Question

大家好，我尝试在网站上实现一些翻转卡片，但我遇到了一个小问题。我有四张牌，例如第一张牌在 1 秒后开始翻转，然后在 2 秒后第一张牌必须再次翻转并“关闭”然后第二张牌开始翻转，3 秒后第二张牌必须“关闭”和第三次开始翻转，但我不知道为什么我的卡片开始翻转但从未“关闭”

function FlipCard() {
const [isFlipped, setisFlipped] = useState(false);
const [isFlippedSecond, setIsFlippedSecond] = useState(false);
const [isFlippedThird, setisFlippedThird] = useState(false);
const [isFlippedFour, setisFlippedFour] = useState(false);

useEffect(() => {
    const timer = setTimeout(() => {
        console.log('first');
        setisFlipped(!isFlipped);
    }, 1000);

 const secondtimer = setTimeout(() => {
    console.log('second');
    setisFlipped(!isFlipped);
    setIsFlippedSecond(!isFlippedSecond);

    // console.log('i tried to close the first thing');
    // setIsFlippedSecond(!isFlippedSecond);
}, 2000);

const thirdtimer = setTimeout(() => {
    console.log('third');
    setisFlippedThird(!isFlippedThird);
    setIsFlippedSecond(!isFlippedSecond);

    // setisFlippedThird(!isFlippedThird);
}, 3000);

const fourtimer = setTimeout(() => {
    console.log('for');
    setisFlippedThird(!isFlippedThird);

    setisFlippedFour(!isFlippedFour);
}, 4000);
let returnThings = [timer, secondtimer, thirdtimer, fourtimer];
return () => clearTimeout(returnThings);
}, [isFlippedFour]);

return (
<>
    <div className='FirstCards '>
        <ReactCardFlip isFlipped={isFlipped} flipDirection='vertical'>
            <div className=' location-front-item  frontCard'>
              
                <div className='FirstCardsFrontText'>
                    You don't feel any improvement?
                </div>
                <div>
                    {' '}
                    이거 이해할 수 있으면 한국어 잘 할 수 있은가 봐요
                </div>
             
            </div>

            <div className=' location-back-item backCard'>
                <div>
                    Don't worry, it's something normal that came when
                    you start to learn something new, give yourself
                    time, even a caterpillar need time until it change
                    into a butterfly and start to fly
                </div>
            </div>
        </ReactCardFlip>
    </div>

    <div className='SecondCards '>
        <ReactCardFlip
            isFlipped={isFlippedSecond}
            flipDirection='vertical'>
            <div className=' location-front-item  frontCard'>
              
                <div className='FirstCardsFrontText'>
                    You don't feel any improvement?
                </div>
                <div>
                    {' '}
                    이거 이해할 수 있으면 한국어 잘 할 수 있은가 봐요
                </div>
              
            </div>

            <div className=' location-back-item backCard'>
                <div>
                    Don't worry, it's something normal that came when
                    you start to learn something new, give yourself
                    time, even a caterpillar need time until it change
                    into a butterfly and start to fly
                </div>
            </div>
        </ReactCardFlip>
    </div>

    <div className='ThirdCars '>
        <ReactCardFlip
            isFlipped={isFlippedThird}
            flipDirection='vertical'>
            <div className=' location-front-item  frontCard'>
              

                <div className='FirstCardsFrontText'>
                    You don't feel any improvement?
                </div>
                <div>
                    {' '}
                    이거 이해할 수 있으면 한국어 잘 할 수 있은가 봐요
                </div>
              
            </div>

            <div className=' location-back-item backCard'>
                <div>
                    Don't worry, it's something normal that came when
                    you start to learn something new, give yourself
                    time, even a caterpillar need time until it change
                    into a butterfly and start to fly
                </div>
            </div>
        </ReactCardFlip>
    </div>

    <div className='FourCard '>
        <ReactCardFlip
            isFlipped={isFlippedFour}
            flipDirection='vertical'>
            <div className=' location-front-item  frontCard'>
              

                <div className='FirstCardsFrontText'>
                    You don't feel any improvement?
                </div>
                <div>
                    {' '}
                    이거 이해할 수 있으면 한국어 잘 할 수 있은가 봐요
                </div>
               
            </div>

            <div className=' location-back-item backCard'>
                <div>
                    Don't worry, it's something normal that came when
                    you start to learn something new, give yourself
                    time, even a caterpillar need time until it change
                    into a butterfly and start to fly
                </div>
            </div>
        </ReactCardFlip>
    </div>
</>
);
}