Remix.run, Remix-Auth destroy user session if token validation fails

I am using Remix, along with Remix-Auth and using the Twitch API/OAuth, which requires that I check in with their /validate endpoint every hour docs. I had someone recommend that I use a resource route and POST to that if the validation endpoint returned a status of 401, however, I need as I stated before the request needs to be sent every hour I figured maybe I could use something like React-Query to POST to the resource route every hour.

Just pointing out that I use createCookieSessionStorage with Remix Auth to create the session

Problem

I haven't been able to achieve the actual session being destroyed and a user being re-routed to the login page, I have left what actual code I have currently any help or suggestions to actually achieve the session being destroyed and be re-routed to the login page if the validation fails would be greatly appreciated.

// React Query client side, checks if the users token is still valid
  const { error, data } = useQuery("TV-Revalidate", () =>
    fetch("https://id.twitch.tv/oauth2/validate", {
      headers: {
        Authorization: `Bearer ${user?.token}`,
      },
    }).then((res) => res.json())
  );

The above React Query returns this

// My attempt at the resource route
// ~routes/auth/destroy.server.ts
import { ActionFunction, redirect } from "@remix-run/node";
import { destroySession, getSession } from "~/services/session.server";

export const action: ActionFunction = async ({request}) => {
    const session = await getSession(request.headers.get("cookie"))
    return redirect("/login", {
        headers: {
            "Set-Cookie": await destroySession(session)
        }
    })
}

// Second attempt at resource route
// ~routes/auth/destroy.server.ts
import { ActionFunction, redirect } from "@remix-run/node";
import { destroySession, getSession } from "~/services/session.server";

export const action: ActionFunction = async ({request}) => {
    const session = await getSession(request.headers.get("cookie"))
    return destroySession(session)
}

I attempted using an if statement to POST to the resource route or else render the page, however, this definitely won't work as React errors out because functions aren't valid as a child and page is blank.

//index.tsx
export default function Index() {
  const { user, bits, vali } = useLoaderData();

  console.log("loader", vali);

  const { error, data } = useQuery("TV-Revalidate", () =>
    fetch("https://id.twitch.tv/oauth2/validate", {
      headers: {
        Authorization: `Bearer ${user?.token}`,
      },
    }).then((res) => res.json())
  );

  if (data?.status === 401)
    return async () => {
      await fetch("~/services/destroy.server", { method: "POST" });
    };
  else
    return ( ... );}