redux-persist resets the state when updating the page

I use redux-persist in my Next js project. The status is saved in localStorage when the store is changed, but it is reset when the page is changed. What could be the problem? One of the reduser. I'm not sure, but maybe this problem is caused by SSR

import { createSlice, PayloadAction } from "@reduxjs/toolkit"
import { HYDRATE } from "next-redux-wrapper";
import { searchStateType } from "../../models/reduserModels/reduserModels";

const initialState: searchStateType = {
   dataBar:
   {
      location: '',
      date: {
         from: undefined,
         to: undefined
      },
      number: {
         adults: 1,
         child: 0,
         rooms: 1
      }
   }
}

const searchDataSlice = createSlice({
   name: 'search',
   initialState,
   reducers: {
      searchbar: (state, action: PayloadAction<searchStateType>) => {
         state.dataBar = { ...action.payload.dataBar }
      }
   },
   extraReducers: {
      [HYDRATE]: (state, action) => {
         return {
            ...state,
            ...action.payload.search
         }
      },
   }
})

export const { searchbar } = searchDataSlice.actions
export default searchDataSlice.reducer

store

const makeStore = () => {
   const isServer = typeof window === "undefined";

   const rootReduser = combineReducers({
      search: searchDataReduser,
      userData: userDataReduser,
      regions: regionsIdReduser,
      loading: visibleLoadingReduser,
      hotelsRegion: hotelsRegionReduser,
      hotelsId: hotelsIdReduser,
      room: roomBookingReduser,
      webRoom: webRoomBookingReduser,
      bookingRoomData: bookingRoomsUserDataReduser,
   });

   if (isServer) {
      const store = configureStore({
         reducer: rootReduser,
         middleware: (getDefaultMiddleware) =>
            getDefaultMiddleware({
               immutableCheck: false,
               serializableCheck: false,
            }),
      });
      return store;
   } else {
      const persistConfig = {
         key: "nextjs",
         storage,
         whitelist: ['search']
      };

      const persistedReducer = persistReducer(persistConfig, rootReduser);

      const store = configureStore({
         reducer: persistedReducer,
         middleware: (getDefaultMiddleware) =>
            getDefaultMiddleware({
               immutableCheck: false,
               serializableCheck: {
                  ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
               },
            }),
      });

      (store as any).__persistor = persistStore(store)

      return store;
   }
};

export const store = makeStore()
export type RootStore = ReturnType<typeof makeStore>;
export type RootState = ReturnType<RootStore['getState']>;
export type AppThunk<ReturnType = void> = ThunkAction<ReturnType, RootState, unknown, Action>;
export type AppDispatch = typeof store.dispatch

export const useAppDispatch: () => AppDispatch = useDispatch
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector


export const wrapper = createWrapper<RootStore>(makeStore);

please help me solve this problem

const searchDataSlice = createSlice({
   name: 'search',
   initialState,
   reducers: {
      searchbar: (state, action: PayloadAction<searchStateType>) => {
         state.dataBar = { ...action.payload.dataBar }
      }
   },
   extraReducers: {
      [HYDRATE]: (state, action) => {
         let search = { ...action.payload.search };
         delete search.PERSISTED_FIELD

         return {
            ...state,
            ...search
         }
      },
   }
})