I have a simple code, I’m new to mobx, its easier in context but I had to use mobx :

import { makeAutoObservable } from "mobx";
import booksRepository from "../Books/Books.repository";

class BookStore {
  books = [];
  showPrivateBooks = false;

  constructor() {
    makeAutoObservable(this);
  }

  async loadBooks() {
    const books = await booksRepository.getBooks(this.showPrivateBooks);
    this.books = [...books];
  }

  async addBook(newBook) {
    await booksRepository.addBook(newBook);
    await this.loadBooks();
  }

  async toggleShowPrivateBooks() {
    this.showPrivateBooks = !this.showPrivateBooks;
    await this.loadBooks();
  }
}

const bookStore = new BookStore();
export default bookStore;

and the index.js:

import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import { observer } from "mobx-react";
import bookStore from "./Store/BookStore";

import "./styles.css";

function App() {
  useEffect(() => {
    bookStore.loadBooks();
  }, []);

  const handleAddBook = async () => {
    const newBook = {
      name: "Book",
      ownerId: "postnikov",
      author: "Someone",
    };
    await bookStore.addBook(newBook);
  };

  return (
    <div>
      <div>
        <button onClick={() => bookStore.toggleShowPrivateBooks()}>
          {bookStore.showPrivateBooks ? "Show All Books" : "Show Private Books"}
        </button>
      </div>
      {bookStore.books.map((book, i) => (
        <div key={i}>
          {book.author}: {book.name}
        </div>
      ))}
      <button onClick={handleAddBook}>Add</button>
    </div>
  );
}

const ObservedApp = App;

const rootElement = document.getElementById("root");
ReactDOM.render(<ObservedApp />, rootElement);

but, the toggle button doesn’t work.

It looks like the store is updating but the data on the screen doesn’t change
Once I press the button, the store updates, and new data is loaded but the UI does not change

you can find the full code here codesandbox