Tengo la siguiente clase MobX que mantiene la operación asíncrona:

 import { makeObservable, observable, action } from "mobx"; class AsyncAction<T, P = void> { public isLoading = false; public error?: unknown; public response?: T; constructor( private asyncAction: (payload: P) => Promise<T>, ) { makeObservable(this, { error: observable, isLoading: observable, response: observable, setLoading: action, setError: action, setResponse: action, }); } setLoading(isLoading: boolean) { this.isLoading = isLoading; } setError(error: unknown) { this.error = error; } setResponse(response: T | undefined) { this.response = response; } async run(payload: P) { try { this.setLoading(true); const response = await this.asyncAction(payload); this.setResponse(response); } catch (error) { this.setError(error); } finally { this.setLoading(false); } } } export { AsyncAction };

También tengo la siguiente tienda que extiende AsyncAction:

 import api from '../api'; import { AsyncAction } from "./AsyncAction"; class StatusesStore extends AsyncAction<Record<string, Status>> { constructor() { super(async () => { const { statusesMap } = await api.fetchStatusesMap(); return statusesMap; }); makeObservable(this, { setStatus: action, }); } public setStatus(name: string, status: Status) { if (this.response) { this.response[name] = status; } } }

Cuando disparo desde mi componente rootStore.statusesStore.setStatus('name', 'DONE') , el componente no se actualiza.
Cuando abro devools, veo lo siguiente: En lugar de estar envuelto con observable, las claves de objeto son cadenas simples. Esta podría ser una razón por la que cambiar la cadena de estado no desencadena nada.
¿Cómo puedo arreglar eso? ¿Qué me estoy perdiendo?