react-mobx@6 компоненты не перерисовываются при изменении значений в магазине

Question

Я пытаюсь использовать реаги-моб в первый раз. Я следовал за https://mobx-react.js.org/recipes-context#multiple -global-stores , чтобы создать мои компоненты.

Ниже приведен код. В App осуществляется ajax звонок. При сбое вызова ajax в uiStore устанавливается сообщение об ошибке, и компонент ErrorAlert должен выполнить повторную визуализацию. Когда я запускаю этот код, я вижу ошибку, полученную при вызове ajax, и ошибка устанавливается в uiStore. Я вижу uiStore.error обновленным, если я console.log(uiStore). Но по какой-то причине ErrorAlert не рендерится повторно, даже если он заключен в observer. Что я делаю не так?

Спасибо!

uiStore:

import { observable, action } from "mobx";

class UiStore {
  @observable error = undefined;
  @action setError = (error) => {
    this.error = parseError(error);
  };
}
export default new UiStore();

storesContext:

import React from "react";
import uiStore from "../stores/uiStore";

export const storesContext = React.createContext({
  uiStore
});

useStores hook:

import React from "react";
import { storesContext } from "../contexts";

export const useStores = () => React.useContext(storesContext);

Приложение:

import React, { useEffect } from "react";
import { useStores } from '../hooks/useStores';

import { ErrorAlert } from '../ErrorAlert';

export const App = props => {
  const { uiStore } = useStores();
  useEffect(() => {
    loadUser();
  }, []);

  const loadUser = () => {
    $.ajax({
      url: '/some-endpoint',
      method: "GET",
      dataType: "json",
      contentType: "application/json",
      success: () => {
        ...
      },
      error: e => {
        uiStore.setError(e);
      }
    });
  };

  return (
    <>
      <ErrorAlert />
    </>
  );
}

ErrorAlert

import React from "react";
import { observer } from 'mobx-react';
import { useStores } from '../hooks/useStores'

export const ErrorAlert = observer(props => {
  const { uiStore } = useStores();

  return <div>{uiStore.error}</div>;
});