I'm using nextjs app router and redux-persist but once i set the state in the store and reload the page, state disappears and cannot persist.

I'm looking for your help guys.

import reducer from "./rootReducer";
import { configureStore, GetThunkAPI } from "@reduxjs/toolkit";
import createWebStorage from "redux-persist/lib/storage/createWebStorage";
import { FLUSH, PAUSE, PERSIST, persistReducer, PURGE, REGISTER, REHYDRATE } from "redux-persist";
import { AsyncThunkConfig } from "@reduxjs/toolkit/dist/createAsyncThunk";


const createNoopStorage = () => {
  return {
    getItem(_key: string) {
      return Promise.resolve(null);
    },
    setItem(_key: string, value: string) {
      return Promise.resolve(value);
    },
    removeItem(_key: string) {
      return Promise.resolve();
    },
  };
};

const storage = typeof window !== "undefined" ? createWebStorage("local") : createNoopStorage();

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


const persistedReducer = persistReducer(persistConfig, reducer);

const ignoredActions = [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER];

const makeStore = () =>
  configureStore({
    reducer: persistedReducer,
    devTools: process.env.NODE_ENV !== "production",
    middleware: (gDM) => gDM({ serializableCheck: { ignoredActions } }),
  });