How to prevent store from being overwritten due to persist?

Question

redux

Hello.
I have a problem.

When I click on the back button in the browser, the url changes and the action is
dispatched

effects

useEffect(() => {
    const activeStep = screenSteps[screenSteps.length - 1];
    if (
      activeStep.localPath !== router.query.localPath &&
      router.query.localPath
    ) {
      dispatch(updateScreenStep('BACK'));
    }
  }, [router.query]);

Action and Reducer

export const updateScreenStep = (action: Action, stepData?: IStep) => ({
  type: ResearchActionTypes.UPDATE_SCREEN_STEP,
  payload: {
    stepData,
    action,
  },
});


export const reduceUpdateScreenStep = (
  state: IState,
  payload: IScreenStepData
): any => {
  const { action, stepData } = payload;
  const newScreenData = [...state.screenSteps];

  if (action === 'NEXT') newScreenData.push(stepData);
  else newScreenData.pop();

  return newScreenData;
};

Everything works well, but I also have a persist store connected in my project and its action (__NEXT_REDUX_WRAPPER_HYDRATE__) has the old store and overwrites the new store with the old one. I think it's because the page is reloading.

Maybe someone knows how to fix this?

My action with an updated store

Persist with the old one that overwrites