Error: redux-persist: persist timed out for persist key "mykey"

I'm bootstrapping a new React app that uses Redux + Saga + Persist. I already have many other apps that I've made using the same pattern, yet for this fresh new app I get redux-persist: persist timed out for persist key "mykey" when rehydrating after the timeout passes (and my app is completely blank until the timeout).

Here is my relevant code:

import { combineReducers, createStore, applyMiddleware, Middleware } from "redux";
import localforage from 'localforage'
import { PersistConfig, persistReducer } from "redux-persist";
import logger from 'redux-logger'
import { connectRouter } from 'connected-react-router'
import { createBrowserHistory } from 'history'
import { routerMiddleware } from 'connected-react-router'
import { dataReducer } from "state";
import createSagaMiddleware from "redux-saga";

const middlewares:Middleware[] = [];

const persistConfig : PersistConfig<any> = {
    key: "mykey",
    timeout: 5000,
    version: 1,
    storage: localforage, // yup, I've added the package
    migrate: migrate as any,
    whitelist: ['data'] // also tried without "whitelist" key at all, same
} 

export const history = createBrowserHistory();


function migrate(state:PersistedGlobalState, versionKey:number){
  if(state && state._persist && (state._persist.version === versionKey)){
    return Promise.resolve(state); //same version, return the state.
  }
  return Promise.resolve({});
  
}

const reducerMap = {
    data: dataReducer, //coming from another file with the reducer/state code
    router: connectRouter(history)
}

export const rootReducer = combineReducers(reducerMap);
const persistedReducer = persistReducer(persistConfig, rootReducer);

if (process.env.NODE_ENV === 'development') {
    middlewares.push(logger);
}
const sagaMiddleware = createSagaMiddleware();
middlewares.push(sagaMiddleware);
middlewares.push(routerMiddleware(history));

export const store = createStore(persistedReducer, applyMiddleware(...middlewares))

This is the pattern that I'm using pretty much for every app I create. They all work.

In App.tsx I have:

function App() {
  return (
    <StateWrapper>
        <div>
            ...
        </div>
    </StateWrapper>
  );
}

export default App;

Where StateWrapper is:

import { Provider } from "react-redux";
import { Persistor, persistStore } from "redux-persist";
import { PersistGate } from "redux-persist/integration/react";
import { store } from "./configure";

export function StateWrapper(props:{children:any}){
    const persistor: Persistor = persistStore(store);
    return (<Provider store={store}>
        <PersistGate persistor={persistor}>
            {props.children}
        </PersistGate>
    </Provider>)
}

Basically I feed the store that I exported in the first snippet to the provider. What am I doing wrong?