React native Error "No QueryClient set, use QueryClientProvider to set one"

import * as React from "react";

import { useFonts } from "expo-font";
import { View } from "react-native";
import * as SplashScreen from "expo-splash-screen";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Host } from "react-native-portalize";
import { ActionSheetProvider } from "@expo/react-native-action-sheet";
import { AuthProvider } from "./src/context/auth";
import RootNavigation from "./src/navigation";

SplashScreen.preventAutoHideAsync();

const queryClient = new QueryClient({
  defaultOptions: {
    refetchOnWindowFocus: false,
  },
});

export default function App() {
  const [fontsLoaded] = useFonts({
    Grotley: require("./assets/fonts/Grotley-Regular.otf"),
    Bandar: require("./assets/fonts/BandarRegular.otf"),
    BandarBold: require("./assets/fonts/Bandar-Bold.otf"),
  });

  const onLayoutRootView = React.useCallback(async () => {
    if (fontsLoaded) {
      await SplashScreen.hideAsync();
    }
  }, [fontsLoaded]);

  if (!fontsLoaded) {
    return null;
  }

  return (
    <Host>
      <QueryClientProvider client={queryClient}>
        <AuthProvider>
          <ActionSheetProvider>
            <View
              style={{
                flex: 1,
              }}
              onLayout={onLayoutRootView}
            >
              <RootNavigation />
            </View>
          </ActionSheetProvider>
        </AuthProvider>
      </QueryClientProvider>
    </Host>
  );
}