redirect not working when using it with loader

[Preet-Sojitra]

I have this authentication function:

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

export async function requireAuth() {
  // Fake authentication
  const isLoggedIn = false

  if (!isLoggedIn) {
    return redirect("/login")
  }
  return null
}

Now I am using this function inside loader, for making protected routes

<Route  index element={<Dashboard />}  loader={async () => await requireAuth()} />
<Route path="income" element={<Income />} loader={async () => await requireAuth()}  />
<Route path="vans" element={<HostVans />} loader={hostVansLoader} />

And here's the code for hostVansLoader

export async function loader() {
   await requireAuth()
  return getHostVans()
}

Issue is even though isLoggedIn = false, it is not being redirected to /login route. On clicking the dashboard it will open the dashboard page, but if I manually type the url in browser then it will redirect to "/login" page

[AhmedAdel700]

import { redirect } from "react-router-dom"
export async function requireAuth() {
const isLoggedIn = false
if (!isLoggedIn) {
const response = redirect("/login")
response.body = true
throw response
}}

[AbdulrahmanReda70]

it works!
thanks how this change make it work?