Redux toolkit persist. My states cannot be accessed – React native

My app in react native is fine but when i tried to implement redux toolkit persist my states are not working That is I can’t access them and that is raising an error.

So this is a code from the error code

const Router = () => {
  const { user, userDef } = useSelector(userdata);
  const { isAuthenticated } = useSelector(authdata);
  const dispatch = useDispatch();
  useEffect(() => {
    auth.onAuthStateChanged((user) => {
      if (user) {
        dispatch(setUser({ ...user.metadata, email: user.email }));
      } else {
        dispatch(setUser(null));
        dispatch(login(false));
      }
    });
  }, []);
  const authNav = () => {
    return (
      <NativeStack.Navigator screenOptions={{ headerShown: false }}>
        {user && isAuthenticated ? (
          <>
            {userDef === "Doctor" ? (
              <>
                <NativeStack.Screen
                  name="doctorcontainer"
                  component={DoctorContainer}
                />
              </>
            ) : userDef === "Nurse" ? (
              <>
                <NativeStack.Screen
                  name="nursecontainer"
                  component={NurseContainer}
                />
              </>
            ) : userDef === "Patient" ? (
              <>
                <NativeStack.Screen
                  name="patientcontainer"
                  component={PatientContainer}
                />
              </>
            ) : (
              <NativeStack.Screen
                name="logincontainer"
                component={LoginContainer}
              />
            )}
          </>
        ) : (
          <>
            <NativeStack.Screen
              name="logincontainer"
              component={LoginContainer}
            />
          </>
        )}
      </NativeStack.Navigator>
    );
  };

this is my store

import { combineReducers, configureStore } from "@reduxjs/toolkit";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { persistReducer } from "redux-persist";
import thunk from "redux-thunk";
import authSlice from "./authSlice";
import userSlice from "./userSlice";

const reducers = combineReducers({
  auth: authSlice,
  user: userSlice,
});
const persistConfig = {
  key: "root",
  storage: AsyncStorage,
  whitelist: ["loginUser"],
};
const persistedReducer = persistReducer(persistConfig, reducers);
const store = configureStore({
  reducer: { persistedReducer },
  middleware: [thunk],
  devTools: process.env.NODE_ENV !== "production",
});
export default store;

and the app.js

import { StatusBar } from "expo-status-bar";
import { Router } from "./src/navigation/router";
import { Provider } from "react-redux";
import store from "./src/store";
import { LogBox } from "react-native";
import { PersistGate } from "redux-persist/integration/react";
import { persistStore } from "redux-persist";

LogBox.ignoreLogs([
  "AsyncStorage has been extracted from react-native core and will be removed in a future release.",
]);
let persistor = persistStore(store);
export default function App() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <Router />
      </PersistGate>
      <StatusBar style="auto" animated />
    </Provider>
  );
}

this is my slice code

const userSlice = createSlice({
  name: "loginUser",
  initialState: { user: null, userDef: null },
  reducers: {
    setUser(state, action) {
      state.user = action.payload;
    },
    setUserType(state, action) {
      state.userDef = action.payload;
    },
  },
  extraReducers: {
    [registerUser.pending]: (state, action) => {
      state.status = "loading";
    },
    [registerUser.fulfilled]: (state, action) => {
      state.status = "success";
    },
    [registerUser.rejected]: (state, action) => {
      state.status = "failed";
    },
    [signInUser.pending]: (state, action) => {
      state.status = "loading";
    },
    [signInUser.fulfilled]: (state, action) => {
      state.status = "success";
    },
    [signInUser.rejected]: (state, action) => {
      state.status = "failed";
    },
  },
});
export const { setUser, setUserType } = userSlice.actions;
export const userdata = (state) => state.user;
export default userSlice.reducer;

I don’t know the cause of the problem and I have read documentation and blogs but no help from there