redirecting in beforeLoader changes url but not the mounted component

export const Route = createFileRoute("/auth/instagram")({
  validateSearch: (search: Record<string, unknown>): ItemFilters => {
    return {
      code: search.code as string,
    };
  },
  component: InstagramAuth,
  beforeLoad: async () => {
    console.log(auth.currentUser);
    if (!auth.currentUser) {
      console.log("should redirect");
      throw redirect({
        to: "/",
      });
    }
  },
});

export const Route = createFileRoute("/auth/instagram")({
  validateSearch: (search: Record<string, unknown>): ItemFilters => {
    return {
      code: search.code as string,
    };
  },
  component: InstagramAuth,
  beforeLoad: async () => {
    console.log(auth.currentUser);
    if (!auth.currentUser) {
      console.log("should redirect");
      throw redirect({
        to: "/",
      });
    }
  },
});