Component not rerendering when observer is updated

[MatthieuJnon]

Hi, I have a component which is not being rerendered when the state updates and I can't figure out why, so I thought I'd ask you lovely people for help.

const KeyComponent: React.FC<KeyProps> = observer(({ scaleKey, scaleType }) => {
  const ScalesStore = useContext(ScalesContext);

  const isSelected = ScalesStore.scales[scaleType].includes(scaleKey);

  const handlePress = () => {
    ScalesStore.toggleKey(scaleType, scaleKey);
  };

  return (
    <KeyPressable selected={isSelected} onPress={handlePress}>
      <PressableText selected={isSelected}>{scaleKey}</PressableText>
    </KeyPressable>
  );
});

This is the state class

class Scales {
  scales;

  constructor() {
    makeAutoObservable(this);
    this.scales = {
      major: [Key.C],
      minor: [Key.A],
    };
  }

  isSelected(scaleType: ScaleType, key: Key) {
    return this.scales[scaleType].includes(key);
  }

  toggleKey(scaleType: ScaleType, key: Key) {
    if (this.isSelected(scaleType, key)) {
      this.scales[scaleType] = this.scales[scaleType].filter((k) => k !== key);
    } else {
      this.scales[scaleType].push(key);
    }
  }
}

When I press the button, isSelected within the component doesn't change, but when navigating away and back to it, it changes.
Would anyone know what is wrong with my approach?

Thank you for your help 🙏

[kubk]

Hey, did you check that your transpiler is configured correctly? https://mobx.js.org/installation.html#use-spec-compliant-transpilation-for-class-properties

There is a JS oneliner, please run it to check. If there is no issue, it's better to create a reproducible codesandbox with the issue here: https://codesandbox.io/s/minimal-mobx-react-project-ppgml?file=/index.js

[MatthieuJnon]

Thank you for the answer, gonna check tmrw when I'm back at my computer, this could well be it.

[MatthieuJnon]

Yeah it worked, thanks a lot!