Cannot update a component while rendering a different component in NextJS, MUI, current solutions don't work

Question

I build WebApp using NextJS, Mui, ReduxJs/Toolkit. It works fine but getting warning when I try to navigate to the same page. For example, I am on the Home page now and then click the Home link again. Then I get the above warning. When I navigate to another link, it doesn't occur such a warning. After debugging, found that global HYDRATE action handler is the issue.

const rootReducer = (state: any, action: any) => {
    if (action.type === HYDRATE) {
        const nextState = {
            ...state,
        };
        Object.keys(action.payload).forEach((namespace) => {
            const subStore = action.payload[namespace];

            if (subStore.init === true) {
                nextState[namespace] = { ...subStore };
            }
        });

        return nextState;
    }

    return combinedReducer(state, action);
};

If I comment nextState[namespace] = { ...subStore } ; line then it doesn't happen. But doesn't work either.

This is my reducer definition part.

const shopSlice = createSlice({
    name: SHOP_NAMESPACE,
    initialState,
    reducers: {
        init(state: IShopState, action: PayloadAction<IInitPayload>) {
            const { categorySlug, options, filterValues } = action.payload;

            state.init = true;
            if (!isEmpty(categorySlug)) {
                state.categorySlug = categorySlug;
            }
            if (!isEmpty(options)) {
                state.options = options;
            }
            if (!isEmpty(filterValues)) {
                state.filterValues = filterValues;
            }
        },
    }
});

I already followed this Next-Redux-Wrapper state reconciliation but doesn't work.

Can anyone help this?