React Router redirect function not working

I am implementing a fake authentication system in React router that re-directs the user to the login page with route “/login” when the user is not logged in. The function is in utils.js and I am exporting it to my App.js file where the routes are defined.

The function in utils.js is very basic and looks like this

import { redirect } from "react-router-dom"

export async function requireAuth() {
    const isLoggedIn = false

    if(!isLoggedIn) throw redirect("/login")
}

Then I am importing and providing the function call directly in my loader prop in App.js, like this

import React from 'react';
import { 
  Route, 
  RouterProvider, 
  createBrowserRouter, 
  createRoutesFromElements,
} from 'react-router-dom';
import './server.js';
import './App.css';
import Home from './pages/Vans/Home';
import About from './pages/Vans/About';
import Vans, { loader as vansLoader } from './pages/Vans/Vans';
import Login from './pages/Auth/Login.jsx';
import VanDetail, { loader as vanLoader } from './pages/Vans/VanDetail';
import Layout from './components/Layout';
import HostLayout from './components/HostLayout';
import Dashboard from "./pages/Host/Dashboard";
import Income from './pages/Host/Income';
import HostVans, { loader as hostVansLoader } from "./pages/Host/HostVans";
import HostVanDetail, { loader as hostVanLoader } from './pages/Host/HostVanDetail';
import HostVanInfo from './components/HostVanInfo.jsx';
import Reviews from './pages/Host/Reviews';
import HostVanPrice from './components/HostVanPrice.jsx';
import HostVanPhotos from './components/HostVanPhotos.jsx';
import NotFound from './components/NotFound.jsx';
import Error from './components/Error.jsx';
import { requireAuth } from './utils.js';

const router = createBrowserRouter(createRoutesFromElements(
  <Route path="/" element={<Layout />} errorElement={<Error />}>
    <Route index element={<Home />} />
    <Route path="about" element={<About />} />
    <Route
      path="login"
      element={<Login />}
    />
    <Route
      path="vans"
      element={<Vans />}
      loader={vansLoader}
    />
    <Route 
      path="vans/:id" 
      element={<VanDetail />} 
      loader={vanLoader}
    />
    <Route path="host" element={<HostLayout />}>
      <Route
        index
        element={<Dashboard />}
        loader={async () => await requireAuth()} 
      />
      <Route
        path="income"
        element={<Income />}
        loader={async () => await requireAuth()}
      />
      <Route
        path="reviews"
        element={<Reviews />}
        loader={async () => await requireAuth()}
      />
      <Route
        path="vans"
        element={<HostVans />}
        loader={hostVansLoader}
      />
      <Route
        path="vans/:id"
        element={<HostVanDetail />}
        loader={hostVanLoader}
      >
        <Route
          index
          element={<HostVanInfo />}
          loader={async () => await requireAuth()}
        />
        <Route
          path="pricing"
          element={<HostVanPrice />}
          loader={async () => await requireAuth()}
        />
        <Route
          path="photos"
          element={<HostVanPhotos />}
          loader={async () => await requireAuth()}
        />
      </Route>
    </Route>
    <Route path="*" element={<NotFound />} />
  </Route>
))

function App() {
  return (
    <div className="App">
      <RouterProvider router={router} />
    </div>
  );
}

export default App;

I was expecting the React router to route to the /login page when I try to go to /host route it renders a blank page to the screen. I checked the Network tab in dev-tools and its not fetching the login page document but rather the same host document with HTTP code 304. Can somebody help me fix this issue?