Redux toolkit persist, My authentication is not persisted react-native expo - react-native

Question

So I have looked through this site and I have come across interesting questions post that I have implemented and have no results. So please have a look at the code and direct me. This is what my store looks like and please bear in mind that I am using a package called reduxjs-toolkit-persist
import { configureStore } from "#reduxjs/toolkit";
import AsyncStorage from "#react-native-async-storage/async-storage";
import {
persistCombineReducers,
persistStore,
FLUSH,
REHYDRATE,
PAUSE,
PERSIST,
PURGE,
REGISTER,
} from "reduxjs-toolkit-persist";
import authSlice from "./authSlice";
import userSlice from "./userSlice";
const persistConfig = {
key: "root",
storage: AsyncStorage,
whitelist: ["authUser", "loginUser"],
};
const _persistedReducer = persistCombineReducers(persistConfig, {
auth: authSlice,
user: userSlice,
});
const store = configureStore({
reducer: { _persistedReducer },
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: {
ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
},
serializableCheck: false,
}),
});
export const persistor = persistStore(store);
export default store;
and this is what my app.js looks like
import { StatusBar } from "expo-status-bar";
import { Router } from "./src/navigation/router";
import { Provider } from "react-redux";
import store, { persistor } from "./src/store";
import { LogBox } from "react-native";
import { PersistGate } from "reduxjs-toolkit-persist/integration/react";
LogBox.ignoreLogs([
"AsyncStorage has been extracted from react-native core and will be removed in a future release.",
]);
export default function App() {
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Router />
</PersistGate>
<StatusBar style="auto" animated />
</Provider>
);
}
I have followed the documentation but I don't get desired results. I don't know if it is storage problem or a middleware problem