so I'm doing a project where I'm using redux for the first time. I ended up having problem with states becoming undefined when I refresh the browser. To solve this I've tried implementing the redux-persist. But I get errors in my console which I don't know how I should solve. I only use redux for a single thunk-api call, therefor I got all my store code in my index.js file. I have seen all with threads where someone has a similar problem as me, but nothing solved it.

So here's my index.js file:

import React from 'react';
import {createRoot} from 'react-dom/client';
import App from './App';
import {configureStore} from '@reduxjs/toolkit'
import { Provider } from 'react-redux';
import blobReducer from './services/BlobRetriever'
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import { PersistGate } from 'redux-persist/es/integration/react'

const persistConfig = {
  key:'persist-key',
  storage,
}

const persistedReducer = persistReducer(persistConfig, blobReducer)

const store = configureStore({
  reducer: { 
      blobs: persistedReducer, 
  },
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
})

const persistorStore = persistStore(store)

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate loading={null} persistorStore={persistorStore}>
        <App />
      </PersistGate>
    </Provider>
  </React.StrictMode>,
);

and here's the error message I got: https://puu.sh/IX9Y2/e441359b38.png

am I doing something wrong?