Cannot update a component (`AuthProvider`) while rendering a different component (`RequireAuth`)

I’m working with react-auth-kit

I have this button, when we click on it the function Auth is launched

SignIn file

const navigate = useNavigate();

<button className="signin__enter_enterbutton" onClick={auth}>
       Увійти
       <svg className="signin__enterbutton-arrow" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1.29231 12L10.1538 3.13846V11.0769H12V0H0.923077V1.84615H8.86154L0 10.7077L1.29231 12Z" fill="black" />
       </svg>
</button>

const auth = async () => {
        const response = await authUser(body);
        const token = await response.text();

        if (token === 'User not Found') {
            setError(true);
        } else if(response.status === 200){
            signIn({
                token: token,
                tokenType: 'Bearer',
                expiresIn: 140,
                authState: {
                    user: phoneNumber,
                }
            });

            navigate('/account');
        }
    }

App file

const routes = [
  {
    element: <OutletPage />,
    children: [
      {
        path: 'account',
        element: <RequireAuth loginPath="/sign-in"><Account /></RequireAuth>
        // element: <Account />
      }
    ]
  }
];

<div className="app">
      <CartContext.Provider value={{ numberCart, setNumberCart }} >
        <RouterProvider router={router} />
      </CartContext.Provider>
</div>

Oh and if i delete element: <RequireAuth> <Account /> </RequireAuth> in App.js file and I’ll just leave <Account /> everything is gonna work either

OutLet file

  const [isFilter, setIsFilter] = useState(false);
  let location = useLocation();

  useEffect(() => {
    if (location.pathname.includes('catalog')) {
      setIsFilter(true);
    } else if (!location.pathname.includes('catalog')) {
      setIsFilter(false);
    }
  })

  return (
    <>
      <ScrollToTop />
      <NavBar />
      <div className='app__navCatalogPlusPage'>
        {(!isFilter && location.pathname !== '/hookah-catering') &&
          <div className='app__WithoutFooter_navCatalog'>
            <Navigation />
            <Catalog />
          </div>
        }
        <Outlet />
      </div>
      <Footer />
    </>
  )

In SignIn response receives a response from authUser() that function takes body it is just password and login and will return Bearer Token if everything is okay. Then i convert response into a text and check that we have not received 'User not Found' if not received, write down paramethers in react-auth-kit function signIn() and then call react-router-dom function useNavigate() and there is main problem i will get this type of error

in the second image we can see some error called auth in SignIn file of the fifty-seventh line on this line i have a navigate('/account'); code, and if i delete it error will gone BUT useNavgate() is imoportant bacause only it can work with React Routes in correct way and i have no idea why react-auth-kit cannot work with react-router-dom and how to fix it