oidc-react oidc-client-ts error on MacBookPro M1 Unhandled Promise Rejection: Error: No matching state found in storage

Question

I use MacBook Pro m1 (on Windows everything is fine), issue occurs on safari, chrome, firefox. When I try to login I got this error "Unhandled Promise Rejection: Error: No matching state found in storage"

my code:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import { Providers, AuthHandler } from './appConfig';
import './index.scss';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Providers>
        <AuthHandler>
          <App />
        </AuthHandler>
      </Providers>
    </BrowserRouter>
  </React.StrictMode>
);

import React from 'react';
import GoogleFontLoader from 'react-google-font-loader';
import { SnackbarProvider } from 'notistack';
import { AuthProvider } from 'oidc-react';
import { createTheme, ThemeProvider } from '@mui/material';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { oidcConfig } from '@utils';
import plLocale from 'date-fns/locale/pl';
import { SharedCookiesDisabledInfo } from '@features';

const theme = createTheme({
  typography: {
    fontFamily: ['Lato'].join(','),
  },
});

interface Props {
  children: JSX.Element;
}

export const Providers = ({ children }: Props) => {
  if (!navigator.cookieEnabled) return <SharedCookiesDisabledInfo />

  return (
    <>
      <GoogleFontLoader
        fonts={[
          {
            font: 'Lato',
            weights: [400, '400i', 500, '500i', 700, '700i', 800, '800i'],
          },
        ]}
      />
      <AuthProvider {...oidcConfig}>
        <SnackbarProvider maxSnack={6}>
          <LocalizationProvider adapterLocale={plLocale} dateAdapter={AdapterDateFns}>
            <ThemeProvider theme={theme}>{children}</ThemeProvider>
          </LocalizationProvider>
        </SnackbarProvider>
      </AuthProvider>
    </>
  );
};

import React, { useEffect, useState } from 'react';
import ReactGA from 'react-ga4';
import { hotjar } from 'react-hotjar';
import { useAuth } from 'oidc-react';
import { useSnackbar } from 'notistack';
import { useContractorStore, useUserStore } from '@store';
import { IsLoadingPage } from '@layout';
import { handleApiError, UserRolesEnum } from '@utils';
import { injectHttpHandlerData } from '@lib';
import { CompanyData, getMyCompany } from '@services';
import { RequestErrorMessage } from '@interfaces';
import { Routes, Route, Navigate } from 'react-router-dom';
import { usePageView } from './hooks/usePageViews';
import { SharedCookieInfo } from '@features';

interface Props {
  children: React.ReactElement;
}

export const AuthHandler = ({ children }: Props) => {
  const [redirectUrl, setRedirectUrl] = useState('/');
  const { setUserData } = useUserStore();
  const { ownerMyCompanyData, setOwnerMyCompanyData } = useContractorStore();
  const { enqueueSnackbar } = useSnackbar();
  const { isLoading, userData } = useAuth();
  usePageView();

  const fetchOwnerMyCompanyData = () => {
    getMyCompany()
      .then((data: CompanyData) => {
        if (data) setOwnerMyCompanyData(data);
      })
      .catch((err: RequestErrorMessage[]) => handleApiError(err));
  };

  const selectRedirectUrl = (role: string) => {
    if (role === UserRolesEnum.ACCOUNTANT) setRedirectUrl('/company-list');
    else if (role === UserRolesEnum.BUSINESS) setRedirectUrl('/contractors-list');
    else setRedirectUrl('/role-not-found');
  };

  const initiliazeGoogleAnalitics = () => {
    const key = process.env.REACT_APP_GOOGLE_ANALITICS_KEY;
    if (!key) return;
    ReactGA.initialize(key, {
      testMode: false,
      gaOptions: {
        userId: userData?.profile?.sub,
      },
    });
    ReactGA.isInitialized = true;
  };

  const initializeHotjar = () => {
    const hjid = +process.env.REACT_APP_HOTJAR_HJID;
    const hjsv = +process.env.REACT_APP_HOTJAR_HJSV;
    if (!isNaN(hjid) && !isNaN(hjsv)) hotjar.initialize(hjid, hjsv);
    if (hotjar.initialized()) hotjar.identify(userData?.profile?.sub, { userProperty: 'value' });
  };

  useEffect(() => {
    injectHttpHandlerData(enqueueSnackbar);
  }, [enqueueSnackbar]);

  useEffect(() => {
    const role = userData?.profile?.role;
    if (!isLoading && userData) {
      setUserData(userData);
      selectRedirectUrl(role as string);
    }
  }, [isLoading, setUserData, userData]);

  useEffect(() => {
    const role = userData?.profile?.role;
    if (role === UserRolesEnum.BUSINESS && !ownerMyCompanyData) fetchOwnerMyCompanyData();
    if (userData) {
      initiliazeGoogleAnalitics();
      initializeHotjar();
    }
  }, [userData]);

  if (isLoading || redirectUrl === '/') return <IsLoadingPage />;

  return (
    <>
      <SharedCookieInfo />
      <Routes>
        <Route path="/" element={<Navigate replace to={redirectUrl} />} />
        <Route path="*" element={children} />
      </Routes>
    </>
  );
};

const { isLoading, userData } = useAuth(); isLoading - always true userData - always null

it's seems that useAuth never add userData to localStorage

[enter image description here](https://i.stack.imgur.com/Xqjrg.png)

I read documentation but I can't find the solution