React Native Expo app breaks when using Redux PersistGate

Question

I'm encountering an issue with my React Native Expo application where the default splash screen is being rendered when I add PersistGate to App.js. Here's a rundown of the problem:

• Setup: I'm using reduxjs/toolkit and redux-persist to persist my data.
• Observation: When I include PersistGate in my App.js, the app renders the default splash screen (as shown in the screenshot I'll attach below). However, the store is being updated with data as expected, and I can see faqData logged to the console.
• Attempted Solutions: I've tried deleting node_modules and package-lock.json, and reinstalled dependencies, but the issue persists. I have also tried running the app on expo in physical devices(both android and iphone) and on both emulators (ios & android). I have also tried reinstalling the app using yarn install and npm install.
• Code: Here's a snippet of my App.js, store.js, and package.json for reference:

// App.js
import "react-native-gesture-handler";
import { StatusBar } from "expo-status-bar";
import { StyleSheet } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import Routes from "./navigation/routes";
import { NavigationContainer } from "@react-navigation/native";
import { PaperProvider } from "react-native-paper";
import { Provider } from "react-redux";
import { store, persistor } from "./redux/store";
import { PersistGate } from "redux-persist/integration/react";

export default function App() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <NavigationContainer>
          <PaperProvider>
            <SafeAreaView style={styles.container}>
              <Routes />
              <StatusBar style="auto" />
            </SafeAreaView>
          </PaperProvider>
        </NavigationContainer>
      </PersistGate>
    </Provider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

// store.js
import { configureStore, combineReducers } from "@reduxjs/toolkit";
import { persistStore, persistReducer } from "redux-persist";
import AsyncStorage from "@react-native-async-storage/async-storage";
import faqSlice from "./faq/faqSlice";

const rootPersistConfig = {
  key: "root",
  storage: AsyncStorage,
  keyPrefix: "redux-",
  whitelist: [],
};

const rootReducer = combineReducers({
  faq: faqSlice,
});

const persistedReducer = persistReducer(rootPersistConfig, rootReducer);

export const store = configureStore({
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
  reducer: persistedReducer,
});

export const persistor = persistStore(store);

// package.json (partial)
{
  "dependencies": {
    "@react-native-async-storage/async-storage": "1.21.0",
    "@reduxjs/toolkit": "^2.2.1",
    "expo": "~50.0.13",
    ...
    "redux-persist": "^6.0.0"
  },
}