Context Not Being Defined

const App: Component = () => {
  console.log("Rendering App Component");
  return (
    <MetaProvider>
      <Title>{siteName}</Title>
      <AuthProvider>
        <Main />
      </AuthProvider>
    </MetaProvider>
  );
};

const Main: Component = () => {
  console.log("Rendering main");
  const [_, authenticated] = useAuthContext();
  console.log(`Authenticated: ${authenticated()}`);
  const Content = useRoutes(routes);
  return (
    <Router>
      <div class="h-full bg-white">
        <Show
          when={authenticated()}
          fallback={
            <DefaultLayout>
              <Content />
            </DefaultLayout>
          }
        >
          <ProfileProvider>
            <EnsureClientSetup>
              <AppProvider>
                <DashboardLayout>
                  <Content />
                </DashboardLayout>
              </AppProvider>
            </EnsureClientSetup>
          </ProfileProvider>
        </Show>
      </div>
    </Router>
  );
};

export const AuthProvider: ParentComponent = (props) => {
  console.log("Defining Auth Provider");
  // ... more code here

<ErrorBoundary
      fallback={(error: Error) => (
        <DefaultLayout>
          <span>
            <AppError error={error} onRetry={refresh} />
          </span>
        </DefaultLayout>
      )}
    >
      <Suspense>
        <AuthContext.Provider
          value={[
            auth,
            isAuthenticated,
            {
              authenticate: authenticate,
              refreshAuth: refresh,
              unauthenticate: unauthenticate,
            },
          ]}
        >
          {props.children}
        </AuthContext.Provider>
      </Suspense>
    </ErrorBoundary>
  );
}

export const useAuthContext = () => {
  return useContext(AuthContext)!;
};