Reactjs 从 api 获取时 useEffect 无限循环

我试图从API中获取一些数据，但不管我使用了哪些依赖项，useEffect仍然在进行无限循环，代码中是否有错误，或者为什么它一直这样做？

function HomePage() {
    const [Carousels, setCarousels] = useState([]);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        const getCarousels = async () => {
            setLoading(true);
            const genres = ["BestRated", "Newest"];
            for (const genre of genres) {
                try {
                    const res = await axios.get(`http://localhost:4000/api/carousels/` + genre);
                    console.log(res.data);
                    setCarousels([...Carousels, res.data]);
                } catch (err) {
                    console.log(err);
                }
            }
            setLoading(false);
        }
        getCarousels();
    }, [Carousels]);
    return (
        <div className='Home'>
            <NavBar />
            <HeroCard />
            {!loading && Carousels.map((carousel) => (
                <Carousel key={carousel._id} carousel={carousel} />
            ))}
            <Footer />
        </div>
    );
}