How to handle the Failed to load Clerk error

Question

Clerk throws an error to the user when it is not able to refresh the access token. This mostly happens when the user is offline. But I do not want this because it kinda ruins the user experience, which in this case, the user might think that the website is broken. I want to handle the error myself and throw a nice error if it is necessary. How do I do this in next js. Here is what I have been trying to do but it is not working:

import { ClerkProvider } from "@clerk/nextjs";
import { useRouter } from "next/router";
import Header from "../components/header/header";
import Footer from "../components/footer/footer";
import "../styles/globals.css";

export default function App({ Component, pageProps }) {
  const router = useRouter();

  const handleTokenRefreshError = (error) => {
    if (error.message === "Failed to load Clerk") {
      console.error("Token refresh failed");
    }
  };

  return (
    <ClerkProvider navigate={(to) => router.push(to)} onTokenRefreshError={handleTokenRefreshError}>
      <Header />
      <Component {...pageProps} />
      <Footer />
    </ClerkProvider>
  );
}

I know clerk has the means to solve this error but there is just so little documentation to this matter. Any help will be appreciated.