Почему функция внутри компонента вызывается бесконечное количество раз?

Question

[JekaHC]

У меня есть компонент:

import { Hotels } from "./Hotels";
import WelcomePage from "./WelcomePage";

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.0/firebase-app.js";
import {
  getFirestore,
  collection,
  getDocs,
  addDoc,
} from "https://www.gstatic.com/firebasejs/9.6.0/firebase-firestore.js";
import {
  getAuth,
  signInWithEmailAndPassword,
  createUserWithEmailAndPassword,
  onAuthStateChanged,
  signOut,
} from "https://www.gstatic.com/firebasejs/9.6.0/firebase-auth.js";

import { firebaseConfig, app, db, auth } from "../firebaseConfig";

import { useState } from "react";

function MainPage() {
  const [hotels, setHotels] = useState([]);
  const [authentication, setAuthentication] = useState(false);

  async function fetchHotels() {
    const _hotels = [];
    const querySnapshot = await getDocs(collection(db, "reviews"));
    querySnapshot.forEach((doc) => {
      _hotels.push(doc.data());
    });
    console.log("fetched!");
    setHotels(_hotels);
  }
  function isAuthenticated() {
    onAuthStateChanged(auth, (user) => {
      if (user) {
        // User is signed in, see docs for a list of available properties
        const uid = user.uid;
        setAuthentication(true);
      } else {
        // User is signed out
        setAuthentication(false);
      }
    });
  }
  isAuthenticated();
  fetchHotels();

  return (
    <main className="content">
      <Hotels hotels={hotels} />
    </main>
  );
}

export default MainPage;

После старта приложения функция fetchHotels начинает бесконечно вызываться (об этом свидетельствует console.log("fetched!")).

При тех же условиях, в других компонентах адекватно вызываются другие функции.