A timezone problem on react-native-paper-date (1day-off)

import "@formatjs/intl-datetimeformat/polyfill";
import "@formatjs/intl-datetimeformat/add-all-tz";
import { getCalendars } from "expo-localization";
import React, { useCallback, useEffect } from "react";
import { PaperProvider } from "react-native-paper";
import {
  SafeAreaProvider,
  initialWindowMetrics,
} from "react-native-safe-area-context";
import Root from "./src/navigation/root/Root";
import { StatusBar } from "expo-status-bar";
import { useCustomFonts } from "./src/hooks/helpers/useCustomFonts";
import { Provider } from "react-redux";
import { persister, store } from "./src/redux/store";
import { PersistGate } from "redux-persist/integration/react";
import ToastManager from "toastify-react-native";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { GlobalStyle } from "./src/styles/globalStyles";
import { useAppSelector } from "./src/hooks/redux/reduxHook";
import { pxHp } from "./src/utilities/layout";
import { darkTheme, lightTheme, pinkTheme } from "./src/styles/themes/themes";
import { View } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { I18nextProvider } from "react-i18next";
import i18n from "./src/locale/config";
import * as SplashScreen from "expo-splash-screen";
import useGoogleSignIn from "./src/hooks/helpers/useGoogleSignIn";
import useRtl from "./src/hooks/helpers/useRtl";
import * as Linking from "expo-linking";

const queryClient: QueryClient = new QueryClient();

function AppContent() {
  const { timeZone } = getCalendars()[0];

  const appActiveTheme = useAppSelector((state) => state.app.appActiveTheme);

  useGoogleSignIn();
  useRtl();

  const url = Linking.useURL();

  if (url) {
    const { hostname, path, queryParams } = Linking.parse(url);

    console.log(
      `Linked to app with hostname: ${hostname}, path: ${path} and data: ${JSON.stringify(
        queryParams
      )}`
    );
  }

  const paperTheme =
    appActiveTheme === "Light"
      ? { ...lightTheme }
      : appActiveTheme === "Dark"
      ? { ...darkTheme }
      : { ...pinkTheme };

  const globalStyle = GlobalStyle(paperTheme);

  useEffect(() => {
    if ("__setDefaultTimeZone" in Intl.DateTimeFormat) {
      //@ts-ignore
      Intl.DateTimeFormat.__setDefaultTimeZone(timeZone);
    }
  }, [timeZone]);

  return (
    <GestureHandlerRootView>
      <PaperProvider theme={paperTheme}>
        <SafeAreaProvider initialMetrics={initialWindowMetrics}>
          <StatusBar animated backgroundColor={"#000"} />
          <QueryClientProvider client={queryClient}>
            <Root />
          </QueryClientProvider>
        </SafeAreaProvider>

        <ToastManager
          textStyle={globalStyle.toastText}
          position="center"
          style={{ minHeight: pxHp(90), maxHeight: "auto" }}
        />
      </PaperProvider>
    </GestureHandlerRootView>
  );
}

SplashScreen.preventAutoHideAsync();

export default function App() {
  const { fontsLoaded } = useCustomFonts();

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

  if (!fontsLoaded) {
    return null;
  }

  return (
    <Provider store={store}>
      <PersistGate persistor={persister} loading={<></>}>
        <View style={{ flex: 1 }} onLayout={onLayoutRootView}>
          <I18nextProvider i18n={i18n}>
            <AppContent />
          </I18nextProvider>
        </View>
      </PersistGate>
    </Provider>
  );
}