404 page on React site refresh

I'm getting a 404 error when refreshing any of my pages on my site, or when I copy the link and paste it in a new tab. I'm trying to use the 'catch all' solution mentioned in this thread. I have no idea where to start or what to implement where. I'm using firebase hosting as my hosting platform, firebase RTDB as my database. Here's the full file of my Routes code:

import React, { useContext, useEffect } from "react";
import { Route, Routes } from 'react-router-dom';
import 'bulma/css/bulma.min.css';

//pages
import LandingPage from "./pages/LandingPage";
import NavBar from "./components/NavBar";
import AboutPage from "./pages/AboutUsPage";
import ListingsPage from "./pages/ListingsPage";
import SellPage from "./pages/SellPage";
import PropertyAddPage from "./pages/PropertyAddPage";
import NetworkingPage from "./pages/NetworkingPage";
import LoginPage from "./pages/LoginPage";
import ForgotPasswordPage from "./pages/ForgotPassword";
import ProfilePage from "./pages/ProfilePage";
import ListingDetailPage from "./pages/ListingDetailPage";
import InvestorDetailPage from "./pages/InvestorDetailPage";
import LenderDetailPage from "./pages/LenderDetailPage";
import PhotographerDetailPage from "./pages/PhotographerDetailPage";
import AlertBox from "./components/AlertBox";

//context
import { AuthContext } from './contexts/Authentication';


function App() {
  const { isAuth, user, CheckAuthState, authLoading } = useContext(AuthContext);

  useEffect(() => {
    CheckAuthState()
  }, [])

  function AuthNavigator() {
    return (
      <>
        <NavBar user={null} />
        <Routes>
          <Route exact path="/" element={<LandingPage />} />
          <Route path="/about-us" element={<AboutPage />} />
          <Route path="/listings" element={<ListingsPage />} />
          <Route path="/listings/:id" element={<ListingDetailPage />} />
          <Route path="sign-in" element={<LoginPage />} />
          <Route path="/forgot-password" element={<ForgotPasswordPage />} />
          <Route path="/networking" element={<NetworkingPage />} />
          <Route>{'404'}</Route>
        </Routes>
        <AlertBox />
      </>
    )
  }

  function MainNavigator({ user }) {
    return (
      <>
        <NavBar user={user} />
        <Routes>
          <Route exact path="/" element={<LandingPage />} />
          <Route path="/about-us" element={<AboutPage />} />
          <Route path="/listings" element={<ListingsPage />} />
          <Route path="/listings/:id" element={<ListingDetailPage />} />
          <Route path="/sell" element={<SellPage />} />
          <Route path="/sell/add-property" element={<PropertyAddPage />} />
          <Route path="sign-in" element={<LoginPage />} />
          <Route path="/forgot-password" element={<ForgotPasswordPage />} />
          <Route path="/profile/:id" element={<ProfilePage />} />
          <Route path="/networking" element={<NetworkingPage />} />
          <Route path="/networking/investor/:id" element={<InvestorDetailPage />} />
          <Route path="/networking/lender/:id" element={<LenderDetailPage />} />
          <Route path="/networking/photographer/:id" element={<PhotographerDetailPage />} />
          <Route>{'404'}</Route>
        </Routes>
        <AlertBox />
      </>
    )
  }
  if (authLoading) {
    return <progress className="progress is-small is-info" max="100">60%</progress>

  }

  return (
    isAuth && !authLoading ?
      <MainNavigator user={user} />
      :
      <AuthNavigator />
  );
}

export default App;