Error: A state mutation is detected between two dispatches in NEXTJS

Question

I'm using redux and web3auth with nextjs. But i'm encountering state mutation error in many places. this codebase used to work properly on reactjs. This error occurs sometimes and don't let me proceed with my application flow. And sometime it doesn't create any barrier or doesn't even appear. absolutely clueless how to solve this.

Error: Invariant failed: A state mutation was detected between dispatches, in the path 'web3authInfo.web3authInstance.walletAdapters.openlogin.openloginInstance.currentStorage.storage.persist:nextjs'. This may cause incorrect behavior.

Below is the connect function. the error is occuring from the catch of this function.

const connect = async () => {
    console.log("Hello");
    setIsLoading(true);
    try {
      const web3auth = new Web3Auth({
        clientId: process.env.CLIENT_ID,
        chainConfig: {
          chainNamespace: "eip155",
          chainId: "0x5", 
        },
        web3AuthNetwork: "mainnet",
      });

      await web3auth.initModal();

      await web3auth.connect();
      const user = await web3auth.getUserInfo();

      //   console.log("user:", user);
      const isEmpty = Object.keys(user).length === 0;
      console.log(user, " user", isEmpty);

      if (isEmpty) {
        console.log("no user");
        setIsLoading(false);
        await handleWeb3Logout(web3auth, dispatch);
      }

      const app_scoped_privkey = await web3auth.provider?.request({
        method: "eth_private_key", 
      });
      console.log(app_scoped_privkey, " app scoped private key");
      saveWeb3Instance(dispatch, web3auth);
      if (typeof app_scoped_privkey === "string") {
        const app_pub_key = getPublicCompressed(
          Buffer.from(app_scoped_privkey.padStart(64, "0"), "hex")
        ).toString("hex");
        console.log(app_pub_key, app_scoped_privkey, " apppppp key");

        console.log(user.idToken, " id token id token", user);

        const postRes = await web3authApi(
          dispatch,
          setStatusCode,
          setEmail,
          app_pub_key,
          user.idToken,
          web3authInfo.web3authInstance
        );
      }
    } catch (err) {
      console.log("connect error", err);
    }
  };

This is my web3reducer.js file.

const initialState = {
  web3authInstance: null,
  walletAddress: null,
};

export const web3authReducer = (state = initialState, action) => {
  switch (action.type) {
    case "SET_WEB3AUTH_INSTANCE":
      return { ...state, web3authInstance: action.payload };
    case "SET_WALLET_ADDRESS":
      return { ...state, walletAddress: action.payload };
    case "DISCONNECT_WEB3AUTH":
      return {
        ...state,
        web3authInstance: null,
        walletAddress: null,
      };
    default:
      return state;
  }
};

web3action.js file:

import { RESPONSE_MESSAGE } from "../../utils/message";
import { getSigner } from "@src/function/web3Functions";

export const setWeb3AuthInstance = (web3authInstance) => {
  return async (dispatch) => {
    try {
      dispatch({
        type: "SET_WEB3AUTH_INSTANCE",
        payload: web3authInstance,
      });
    } catch (error) {
      console.error("Error from redux web3authInstance:", error);
    }
  };
};

export const setWalletAddress = (web3authInstance) => {
  return async (dispatch) => {
    try {
      const signer = await getSigner(web3authInstance);
      const walletAddress = await signer.getAddress();

      dispatch({
        type: "SET_WALLET_ADDRESS",
        payload: walletAddress,
      });
    } catch (error) {
      console.error("Error from redux wallet address:", error);
    }
  };
};

export const disconnectWeb3Auth = () => {
  return {
    type: "DISCONNECT_WEB3AUTH",
  };
};

I'm unable to understand why this error is occuring and how to solve. but this is hampering the flow of my application. Please help me solve this issue.