Cannot assign to read only property 'defaultColor' of object '#<Object>'

[knownasilya]

Here's my full class:

class GanttPreferences {
  defaultColor?: LegacyTaskColor;
  onChangeDefaultColor: (color: string) => void;

  constructor(options: Options) {
    makeAutoObservable(this);

    Object.assign(this, options);
  }

  update(options: Partial<Options>) {
    Object.assign(this, options);
  }

  changeDefaultColor(color: LegacyTaskColor) {
    this.defaultColor = color;
    this.onChangeDefaultColor(color);
  }
}

I'm calling changeDefaultColor and getting the error:

Cannot assign to read only property 'defaultColor' of object '#<Object>'.   

All versions are latest, using mobx-react-lite, and React 17.

I tried removing Object.assign, that didn't change anything, not sure what's going on.

[knownasilya]

I was passing prefs.changeDafaultColor in a prop in react, I needed to use arrow functions.

  changeDefaultColor = (color: LegacyTaskColor) => {
    this.defaultColor = color;
    this.onChangeDefaultColor(color);
  };

Fixed my issue

[knownasilya]

Also just learned about makeAutoObservable(this, {}, { autoBind: true }), so that's an option too