Using Nextjs with ReduxToolkit and Reduxpersit

Question

Issue The app after compiling I receive sn empty white page having a hard time tracing the cause. App has refused to mount even on reload having an issue tracing the cause all i get is the issue started while trying to persist auth and it affected use router hook which is used to handle routing on Login my Store code

/* Core */
import {
  configureStore,
  type ThunkAction,
  type Action,
} from "@reduxjs/toolkit";
import {
  useSelector as useReduxSelector,
  useDispatch as useReduxDispatch,
  type TypedUseSelectorHook,
} from "react-redux";
import { persistStore, persistReducer } from "redux-persist";

/* Instruments */
import { rootReducer } from "./reducers";
import { middleware } from "./middleware";
import storage from "redux-persist/lib/storage";
import {
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from "redux-persist";

const persistConfig = {
  key: "root",
  storage,
  whitelist: ["auth"],
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const reduxStore = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) => {
    return getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }).concat(middleware);
  },
});

export const persistore = persistStore(reduxStore);

persistore.subscribe(() => {
  console.log("Actions during persist:", reduxStore.getState());
});

export const useDispatch = () => useReduxDispatch<ReduxDispatch>();
export const useSelector: TypedUseSelectorHook<ReduxState> = useReduxSelector;

/* Types */
export type ReduxStore = typeof reduxStore;
export type ReduxState = ReturnType<typeof reduxStore.getState>;
export type ReduxDispatch = typeof reduxStore.dispatch;
export type ReduxThunkAction<ReturnType = void> = ThunkAction<
  ReturnType,
  ReduxState,
  unknown,
  Action
>;

Error log

    at useRouter (navigation.js:125:15)
    at HotReload (hot-reloader-client.js:355:46)
    at renderWithHooks (react-dom.development.js:11009:18)
    at mountIndeterminateComponent (react-dom.development.js:16761:13)
    at beginWork$1 (react-dom.development.js:18345:16)
    at HTMLUnknownElement.callCallback (react-dom.development.js:20461:14)
    at Object.invokeGuardedCallbackImpl (react-dom.development.js:20510:16)
    at invokeGuardedCallback (react-dom.development.js:20585:29)
    at beginWork (react-dom.development.js:26763:7)
    at performUnitOfWork (react-dom.development.js:25587:12)
    at workLoopSync (react-dom.development.js:25303:5)
    at renderRootSync (react-dom.development.js:25258:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:24382:74)
    at workLoop (scheduler.development.js:261:34)
    at flushWork (scheduler.development.js:230:14)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:534:21)
useRouter @ navigation.js:125
HotReload @ hot-reloader-client.js:355
renderWithHooks @ react-dom.development.js:11009
mountIndeterminateComponent @ react-dom.development.js:16761
beginWork$1 @ react-dom.development.js:18345
callCallback @ react-dom.development.js:20461
invokeGuardedCallbackImpl @ react-dom.development.js:20510
invokeGuardedCallback @ react-dom.development.js:20585