component doesn't re-render when store udates mobx [duplicate]

Question

I made a store, with one field and one action. However, when the event that triggers the action is triggered, the storage itself is not updated, and the component is not re-rendered.

store:

configure({ isolateGlobalState: true });

class CallStore {
  @observable call;

  constructor() {
    this.call = false;
  }

  @action turnOnCall = (isTrue) => {
    return this.call = isTrue;
  }
}

const callStore = new CallStore();

export default callStore;

Сomponent that needs to be updated:

 const App = (props) => {
  return props.call ? (   
    <main>
      <VideoFormContainer />
      <Video />
    </main>
  ) : (
    <main>
      <VideoFormContainer />
    </main>
  );
};

 export default App;

The container of this component:

    const AppContainer = inject('callStore')(observer(({ callStore }) => (
      <App call={callStore.call} />
    )));
    
export default AppContainer;

Сomponent that calls the action

import callStore from '../../stores/callStore';

    const someComponent = () => {
    return (
        <button className="header__form-button" onClick={callStore.turnOnCall(true)} type="submit">Join</button>
    )
}

Answer 1

The problem was in the absence of makeObservable in store.

constructor() {
   makeObservable(this);
}