useEffect is not rerendering automatically with react query refetch. Have to manually reload to see auth state change with Supabase

Right now I'm refactoring my React Native application to use React Query. But, I can't trigger a rerender when the auth state changes. For example, when I call log out no events or sessions are logged and the view isn't changed.

This was working for me when I was using Jotai for the state. Here is a before and after.

Working solution with Jotai:

export default function Navigation() {  const [appLoaded, setAppLoaded] = useAtom(appLoadedAtom);  const [userSession, setUserSession] = useAtom(userSessionAtom);  const validSession = userSession && userSession.user;  useEffect(() => {    supabase.auth.onAuthStateChange((_event, session) => {      setUserSession(session);    });    const getUserSession = async () => {      await supabase.auth.getSession().then(({ data: { session } }) => {        setUserSession(session);        setAppLoaded(true);      });    };    getUserSession();    // eslint-disable-next-line react-hooks/exhaustive-deps  }, []);  if (appLoaded) {    RNBootSplash.hide({ fade: true });  }  return (<NavigationContainer linking={Linking}>      {validSession && <AppStack />}      {!validSession && <AuthStack />}</NavigationContainer>  );}

In the above, the onAuthStateChanged would trigger and the view would change to the logged-out stack.

I've since refactored this to use React Query and that before does not happen automatically.

config/getSupabaseClient.ts

export function getSupabaseClient() {  const supabaseUrl = URL;  const supabaseAnonKey = KEY;  return createClient<Database>(supabaseUrl, supabaseAnonKey, {    auth: {      storage: AsyncStorage as any,      autoRefreshToken: true,      persistSession: true,      detectSessionInUrl: false,    },  });

hooks/useSupabase.ts

function useSupabase() {  return useMemo(getSupabaseClient, []);}export default useSupabase;

navigation.ts

export default function Navigation() {  const supabase = useSupabase();  const { data, isLoading, refetch } = useGetUserSession();  useEffect(() => {    supabase.auth.onAuthStateChange((_, session) => {      console.log('Session', session);      refetch();    });    // eslint-disable-next-line react-hooks/exhaustive-deps  }, []);  if (!isLoading) {    RNBootSplash.hide({ fade: true });  }  return (<NavigationContainer linking={Linking}>      {data && <AppStack />}      {!data && <AuthStack />}</NavigationContainer>  );}

In the above useEffect, events are not triggering like they used to with the logged out events.

How do I properly trigger a refresh with React Query?