Не срабатывает useEffect

У меня такая проблема, есть страница с простой формой авторизации и есть строка, в которой выводится имя пользователя полученного из токена в куках. Запросы все работают хорошо, но почему-то когда я нажимаю кнопку логин, запрос get создался, а страница не изменила название на "пользователь авторизован", но если я например, изменю что-то в коде, например удалю кнопку, получается страница отрисуется заново и при этом то что я задумал сработает я получу имя пользователя, я думаю, что что-то с useEffect, так как он по идее должен срабатывать при изменении. Я даже попробовал использовать observer из mobx-react-lite

const Main: FC = () => {

    const {store} = useContext(Context);

    useEffect(() => {
        if (localStorage.getItem('token')) {
            store.checkAuth()
        }
    }, [])

    if (!store.isAuth) {
        return (
            <div>
                <Form/>
            </div>
        );
    }
return (
        <div className="Main">
            <h1>{store.isAuth ? `Пользователь авторизован ${store.user.email}` : `Авторизуйтесь!!!`}</h1>
            <Form/>
            <button onClick={() => store.logout()}>Выйти</button>
    )
}
export default observer(Main)

форма То что выводится в консоли, когда нажимаю кнопку логин, запрос отрабатывает верно А тут если я что-то меняю в коде js, жму сохранить, то страница перерисовывается и все работает как надо