I have the following MobX class that maintain async operation:

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 };

I also have the following store that extends 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;
    }
  }
}

When I trigger from my component rootStore.statusesStore.setStatus('name', 'DONE'), the component doesn't get updated.
When open devools, I see the following: Instead of being wrapped with observable, the object keys are plain strings. This might be a reason why changing the status string triggers nothing.
How can I fix that? What am I missing?