redux-persist causing 3-5s blank white screen at initial load with nextjs

Everything was working fine when no redux-persist was added, but as I add it - the page is showing white blank screen for 3-5s at each refresh and is producing errors in browser such as: "A non-serializable value was detected in an action, in the path: err. Value: Error: redux-persist: persist timed out for persist key "root" at eval (persistReducer.js?6c08:67:1)" and "next-dev.js?3515:25 A non-serializable value was detected in an action, in the path: register. Value: ƒ register(key) {"

Here is the code for store, slice and _app

// store.tsx 
import { combineReducers, configureStore } from '@reduxjs/toolkit'
import { persistReducer,persistStore } from 'redux-persist'
import storage from 'redux-persist/lib/storage';

import asideRightReducer from './asideRightSlice'

const persistConfig = {
  key: 'root',
  storage,
  
};

const reducers = combineReducers({ asideRight: asideRightReducer });
const persistedReducer = persistReducer(persistConfig, reducers);

export const store = configureStore({
  reducer: persistedReducer,
});

export const persistor = persistStore(store)

export type RootState = ReturnType<typeof store.getState>

export type AppDispatch = typeof store.dispatch

// _app.tsx
* imports */

type AppPropsGetInitialProps = AppProps & {
  initialAsideLeftHandler: string;
} & {
  initialAsideRightHandler: string;
} & {
  initialIsAsideRightOpen: string;
};

function MyApp({
  Component,
  pageProps,
  initialAsideLeftHandler,
  initialAsideRightHandler,
  initialIsAsideRightOpen,
}: AppPropsGetInitialProps) {

  const persistor = persistStore(store);
  
  return (
    <Provider store={store}>
       <PersistGate loading={null} persistor={persistor}>
        <Layout
          initialAsideLeftHandler={initialAsideLeftHandler}
          initialAsideRightHandler={initialAsideRightHandler}
          initialIsAsideRightOpen={initialIsAsideRightOpen}
        >
          <Component {...pageProps} />
        </Layout>
      </PersistGate>
    </Provider>
  );
}

MyApp.getInitialProps = async (appContext: AppContext) => {
  /* getInitialProps */
  };
};

export default MyApp;

// asideRightSlice.tsx
import { createSlice, PayloadAction } from '@reduxjs/toolkit'

import type { RootState } from '../store/store'

interface isAsideRightType {
    isAsideRightOpen: boolean
}

const initialState: isAsideRightType = {
    isAsideRightOpen: true 
}

export const asideRightSlice = createSlice({
    name: "isAsideRightOpen",
    initialState,
    reducers: {
        setIsAsideRightOpen: (state, action: PayloadAction<boolean>) => {
            state.isAsideRightOpen = action.payload
        }
    }
})

export const { setIsAsideRightOpen } = asideRightSlice.actions

export const selectIsAsideRightOpen = (state: RootState) => state.asideRight.isAsideRightOpen

export default asideRightSlice.reducer