React集成react-tinder-card出现Hooks仅能在函数组件内调用报错如何解决

您好，我是React JS初学者，在跟随YouTube教程制作Tinder克隆项目时，完全按照教程步骤操作依然遇到了报错，目前卡在该问题处无法推进，几乎搜索了所有相关渠道都没能定位问题原因。

• 更新所有依赖包
• 重新安装react-tinder-cards
• 查阅该问题相关的其他问答内容

但仍然无法明确问题根源

import React, { useState } from 'react'
import TinderCard from 'react-tinder-card'
import "./TinderCards.css"


function TinderCards() {
    const [people, setPeople] = useState([
        {
            name: "Elon Musk",
            url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Elon_Musk_Royal_Society_%28crop1%29.jpg/220px-Elon_Musk_Royal_Society_%28crop1%29.jpg'

        },
        {
            name: "Jeff Bezos",
            url: 'https://en.wikipedia.org/wiki/File:Jeff_Bezos_at_Amazon_Spheres_Grand_Opening_in_Seattle_-_2018_(39074799225)_(cropped).jpg'

        },
    ])

    const swiped = (direction, nameToDelete) => {
        console.log("removing: " + nameToDelete)
        // setLastDirection(direction)
    }

    const outOfFrame = (name) => {
        console.log(name + "left the screen!")
    }

    return (
        <div className="tinderCards">
            <div className="tinderCards__cardContainer">
                {people.map((person) => (
                    < TinderCard
                        className="swipe"
                        key={person.name}
                        preventSwipe={["up", "down"]}
                        onswipe={(dir) => swiped(dir, person.name)}
                        onCardLeftScreen={() => outOfFrame(person.name)}
                    ></TinderCard>
                ))}
            </div>
        </div>
    )
}

export default TinderCards

报错已修复，次日重启项目后错误自动消失，非常感谢各位抽出宝贵时间留言提供帮助。

内容的提问来源于stack exchange，提问作者Pritam Kundu