При изменении состояния не происходит ререндер списка

Всем привет. При изучении mobx наткнулся на проблему, не понимаю почему при изменении массива listItems не происходит ререндер списка в компоненте List.

Стор:

export const listStore = () => {
    return makeObservable(
        {
            listItems: [],
            addItem(text) {
                this.listItems.push(text);
            }
        },
        {
            listItems: observable,
            addItem: action.bound
        }
    );
};

Компонент, добавляющий текст из инпута в массив стора:

const store = listStore();

export const ListForm = observer(() => {
    const [value, setValue] = useState();

    return (
        <>
            <input type="text" onChange={e => setValue(e.target.value)} />
            <button onClick={() => store.addItem(value)}>Add note</button>
        </>
    );
});

Компонент со списком:

const store = listStore();

export const List = () => {
    return (
        <React.Fragment>
            <ul>
                <Observer>
                    {() => store.listItems.map(item => {
                        return <li key={item}>{item}</li>;
                    }
                </Observer>
            </ul>
            <ListForm />
        </React.Fragment>
    );
};

Не понимаю, почему так происходит. Выглядит так, будто список не подписан на изменение массива в сторе.