React useEffect executes before mobx store updates

I have an react app where I check user is authorized with useEffect and mobx. But when useEffect checks store.isAuth it is false and idk after 10 ms it is true, but I am already on another page. Please help me!

I don’t want to React navigate me on another page when useEffect checks store.isAuth

App.js

import React, { FC, useContext, useEffect, useState } from 'react';
import { Context } from "./index";
import { observer } from "mobx-react-lite";
import {BrowserRouter, Routes, Route, Navigate, useNavigate} from 'react-router-dom';
import AppRouter from './components/AppRouter';

const App = () => {
    const { store } = useContext(Context);
    const navigate = useNavigate();

    useEffect(() => {
        console.log(process.env.REACT_APP_API_URL)
        if (localStorage.getItem('token')) {
            store.checkAuth();
        }

        // getOrders();
    }, []);

    useEffect(() => {
        store.checkOrdersInWork();
    }, []);
    

    useEffect(() => {
        if (!store.isAuth) {
            console.log('NAVIGATE TO /login');
            navigate('/login');
        }
    }, []) // [store.isAuth]


    if (store.isLoading) {
        return <div>Загрузка...</div>
    }


    return (
            <div>
                <AppRouter/>
            </div>

    );
};

export default observer(App);

store.js

    user = {};
    isAuth = false;
    isLoading = false;
    orderId = '';
    ordersInWork = [];

    constructor() {
        makeAutoObservable(this);
    }

    setAuth(bool) {
        this.isAuth = bool;
    }

    setOrdersInWork(orders) {
        this.ordersInWork = orders;
    }

    setUser(user) {
        this.user = user;
    }

    // setSborshik(bool) {
    //     this.isSborshik = bool;
    // }

    setLoading(bool) {
        this.isLoading = bool;
    }

    setOrderId(orderId) {
        this.orderId = orderId;
    }

    async login(email, password) {
...

index.js

import React, { createContext } from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import Store from "./store/store";
import { BrowserRouter } from 'react-router-dom';

export const store = new Store();

export const Context = createContext({
    store,
})

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
    <Context.Provider value={{
        store
    }}>
        <BrowserRouter>
            <App />
        </BrowserRouter>

    </Context.Provider>
);