Почему браузер перестал обновлять результат изменённого кода?

Question

[JekaHC]

Сегодня я продолжал работу над приложением, всё работало ( изменил код - станица обновилась), но как только я создал новый компонент (MyAccount.jsx) и начал с ним работать, то заметил, что обновления перестали выводится в браузер после изменения кода, нужно нажимать на перезагрузку страницы. Ошибок в консоли нету. Ниже покажу основной компонент (MainPage.jsx) и MyAccount.jsx, после создания которого автоматическое обновление перестало работать.

MainPage.jsx

import { useState, useEffect } from "react";
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 { Hotels } from "./Hotels/Hotels";
import WelcomePage from "./WelcomePage/WelcomePage";
import NavBar from "./NavBar/NavBar";
import MyAccount from "./MyAccount/MyAccount";

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.id, doc.data()]);
    });
    console.log("Data is fetched!");
    setHotels(_hotels);
  }

  useEffect(() => {
    fetchHotels();
  }, []);

  function isAuthenticated() {
    onAuthStateChanged(auth, (user) => {
      if (user) {
        const uid = user.uid;
        setAuthentication(true);
        console.log("User is signed in");
        return user;
      } else {
        setAuthentication(false);
        console.log("User is signed out");
      }
    });
  }

  useEffect(() => {
    isAuthenticated();
  }, []);

  return (
    <div className="container">
      {authentication ? (
        <>
          <NavBar />
          
          <MyAccount hotels={hotels} isauth={setAuthentication} />
        </>
      ) : (
        <WelcomePage />
      )}
    </div>
  );
}

export default MainPage;

MyAccount.jsx

import "./myAccount.sass";
import { auth } from "../../firebaseConfig";
import {
  signOut,
  onAuthStateChanged,
} from "https://www.gstatic.com/firebasejs/9.6.0/firebase-auth.js";

import { useEffect, useState } from "react";
import { Hotel } from "../Hotel/Hotel";

function MyAccount(props) {
  const { isauth } = props;
  const { hotels = [] } = props;
  const [userEmail, setUserEmail] = useState([]);

  function logout() {
    signOut(auth);
    isauth(false);
    console.log("Successful logout");
  }

  function userInfo() {
    onAuthStateChanged(auth, (user) => {
      console.log(`user info: ${user.email}"`);
      setUserEmail(user.email);
    });
  }
  useEffect(() => {
    userInfo();
  }, []);
  return (
    <div className="MyAccount">
      <h3 className="MyAccount_title">Hi, {userEmail}</h3>
      <button onClick={logout}>Logout...</button>
      <h4>Your reviews:</h4>
      <hr />
      <div className="Hotels">
        {hotels.map((hotel) => (
          <Hotel
            {...hotel[1]}
            key={hotel[0]}
            id={hotel[0]}
            userEmail={userEmail}
            filter={true}
            deleteBtn={true}
          />
        ))}
      </div>
    </div>
  );
}

export default MyAccount;

Hotel.jsx (Используется в MyAccount.jsx)

import starsMap from "../../starsMap";
import { useEffect, useState } from "react";
import { db } from "../../firebaseConfig";
import {
  doc,
  deleteDoc,
} from "https://www.gstatic.com/firebasejs/9.6.0/firebase-firestore.js";
import "./hotel.sass";

function Hotel(props) {
  const {
    name,
    img,
    localization,
    stars,
    review,
    author,
    filter = false,
    deleteBtn = false,
    userEmail = null,
    id,
  } = props;

  async function deleteReview(id) {
    console.log(`Trying to delete object with id=${id}`);
    await deleteDoc(doc(db, "reviews", id));
  }

  if (filter) {
    console.log(author, userEmail);
    if (author === userEmail) {
      return (
        <div className="Hotel_card" id="hotel_card">
          {deleteBtn ? (
            <button onClick={() => deleteReview(id)}>Delete</button>
          ) : (
            <></>
          )}
          <h2 className="Hotel_card-name">{name}</h2>
          <div className="Hotel_card_wrapper">
            <img className="Hotel_card-img" src={img} alt="hotel_img" />
            <h3 className="Hotel_card-localization">
              {/* Lat:{localization._lat}
              Long:{localization._lat} */}
              <button>Show on map</button>
            </h3>
            {starsMap.get(stars)}
          </div>
          <p className="Hotel_card-review">{review}</p>
          <h5 className="Hotel_card-author">Wroten by {author}</h5>
        </div>
      );
    }
  } else {
    return (
      <div className="Hotel_card">
        <h2 className="Hotel_card-name">{name}</h2>
        <div className="Hotel_card_wrapper">
          <img className="Hotel_card-img" src={img} alt="hotel_img" />
          <h3 className="Hotel_card-localization">
            {/* Lat:{localization._lat}
            Long:{localization._lat} */}
            <button>Show on map</button>
          </h3>
          {starsMap.get(stars)}
        </div>
        <p className="Hotel_card-review">{review}</p>
        <h5 className="Hotel_card-author">Wroten by {author}</h5>
      </div>
    );
  }
}

export { Hotel };

Проблему заметил после того, как сделал кнопку Delete и после нажатия на неё, нужно обновить страницу вручную чтобы удалённый элемент пропал.

Ссылка на весь репозиторий на всякий случай.