Components not reacting to nested mobx stores - mobx

Question

I'm rendering a square based off a nested store (SquareModel) in MobX. When the square is clicked I would like an action to fire within SquareModel, changing a selected property which would, in turn, resize the square. However, I can't seem to get the square to react to the property change. Any ideas on how to get this working?
Sandbox: https://codesandbox.io/s/m51oyzz069
MainStore:
import { observable, decorate } from "mobx";
import SquareModel from "./SquareModel";
class MobXStore {
square = new SquareModel();
}
decorate(MobXStore, {
square: observable
});
export default new MobXStore();
NestedStore:
import { observable, action, decorate } from "mobx";
class SquareModel {
selected = false;
toggleSelection() {
console.log("toggle selection");
this.selected = !this.selected;
}
}
decorate(SquareModel, {
selected: observable,
toggleSelection: action
});
export default SquareModel;
React:
const App = observer(() => {
return (
<svg className="App">
<svg x={100} y={100}>
<Square
unit={MobXStore.square.selected ? 2 : 1}
onPointerUp={MobXStore.square.toggleSelection}
/>
</svg>
</svg>
);
});
export const Square = observer(({ unit, ...props }) => {
console.log("render square");
return (
<g {...props}>
<rect height={unit * 50} width={unit * 50} style={{ fill: "blue" }} />
</g>
);
});

Answer 1

There is an error with "this" in the toggleSelection method
It should look like:
onPointerUp = {() => MobXStore.square.toggleSelection()}
or you need to use, for example, the arrow function here:
toggleSelection = () => {