Error while using Expo: No QueryClient set, use QueryClientProvider to set one

const queryClient = new QueryClient();

export default function App() {
  const date = moment().locale(i18n.locale);

  const { data: tempScale, refetch: updateTempScale } = useQuery({
    queryKey: ["tempScale"],
    queryFn: getSelectedTempScale,
    refetchOnWindowFocus: false,
  });

  const { data: locale, isSuccess: fetchedLocaleSuccessfully } = useQuery({
    queryKey: ["locale"],
    queryFn: fetchLocale,
    refetchOnWindowFocus: false,
  });

  const { data: location } = useQuery({
    queryKey: ["location"],
    queryFn: async () =>
      await fetchReverseGeocoding(
        base_url,
        location.coords.latitude,
        location.coords.longitude,
        i18n.locale
      ),
    refetchOnWindowFocus: false,
    enabled: !!fetchedLocaleSuccessfully,
  });

  const {
    data: forecast,
    isFetched,
    isFetching: refreshing,
    refetch,
  } = useQuery({
    queryKey: ["forecast"],
    queryFn: () => fetchForecast(i18n.locale),
    refetchOnWindowFocus: false,
    enabled: !!fetchedLocaleSuccessfully && !!location,
  });

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

  const onRefresh = React.useCallback(async () => {
    refetch();
  }, []);

  if (!fontsLoaded || !forecast) {
    return null;
  }

  return (
    <SafeAreaView style={styles.container}>
      <QueryClientProvider client={queryClient}> // I tried moving this outside the SafeAreaView as well, but no luck
        <View onLayout={onLayoutRootView}>
          <ScrollView
            refreshControl={
              <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
            }
          >
            ...
          </ScrollView>
        </View>
      </QueryClientProvider>
    </SafeAreaView>
  );
}

const queryClient = new QueryClient();

export default function App() {
  const date = moment().locale(i18n.locale);

  const { data: tempScale, refetch: updateTempScale } = useQuery({
    queryKey: ["tempScale"],
    queryFn: getSelectedTempScale,
    refetchOnWindowFocus: false,
  });

  const { data: locale, isSuccess: fetchedLocaleSuccessfully } = useQuery({
    queryKey: ["locale"],
    queryFn: fetchLocale,
    refetchOnWindowFocus: false,
  });

  const { data: location } = useQuery({
    queryKey: ["location"],
    queryFn: async () =>
      await fetchReverseGeocoding(
        base_url,
        location.coords.latitude,
        location.coords.longitude,
        i18n.locale
      ),
    refetchOnWindowFocus: false,
    enabled: !!fetchedLocaleSuccessfully,
  });

  const {
    data: forecast,
    isFetched,
    isFetching: refreshing,
    refetch,
  } = useQuery({
    queryKey: ["forecast"],
    queryFn: () => fetchForecast(i18n.locale),
    refetchOnWindowFocus: false,
    enabled: !!fetchedLocaleSuccessfully && !!location,
  });

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

  const onRefresh = React.useCallback(async () => {
    refetch();
  }, []);

  if (!fontsLoaded || !forecast) {
    return null;
  }

  return (
    <SafeAreaView style={styles.container}>
      <QueryClientProvider client={queryClient}> // I tried moving this outside the SafeAreaView as well, but no luck
        <View onLayout={onLayoutRootView}>
          <ScrollView
            refreshControl={
              <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
            }
          >
            ...
          </ScrollView>
        </View>
      </QueryClientProvider>
    </SafeAreaView>
  );
}