How to use the mobx-react.disposeOnUnmount function in mobx-react

async componentDidMount() {
    if (this.text) this.translate();
    this.input.focus();

    var activeTab = await getActiveTab();
    sendTabMessage(activeTab.id, {
      type: MessageType.GET_SELECTED_TEXT
    });
    onMessage(({ payload, type }) => {
      if (type === MessageType.SELECTED_TEXT) {
        this.translateText(payload);
      }
    });
    // auto-translate when affecting params to translate is changing
    disposeOnUnmount(this, [
      reaction(() => [this.favorite, toJS(this.params)], () => {
        if (this.translation) this.translate();
      }, { delay: 100 })
    ]);
  }

private createModel() {
    const robotModel = RobotModel.of({
      id: 'Darwin #1',
      connected: true,
      enabled: true,
      name: 'Darwin #1',
      address: '127.0.0.1',
      port: 1234,
    })
    const model = LocalisationRobotModel.of(robotModel)
    this.props.animate && disposeOnUnmount(this, reaction(
      () => 2 * Math.PI * now('frame') / 1000,
      t => this.simulateWalk(model, t),
      { fireImmediately: true },
    ))
    return computed(() => NUgusViewModel.of(model).robot, { equals: () => false })
  }

async componentDidMount() {
    const image = await loadImage(imageUrl)
    runInAction(() => this.props.model.rawImage = { type: 'image', image })
    disposeOnUnmount(this, reaction(() => this.props.animate && now('frame'), this.update))
  }

componentDidMount() {
    this.labelCanvas = document.createElement('canvas');
    this.ctx = this.labelCanvas.getContext('2d');

    disposeOnUnmount(this, autorun(this.drawLabel));

    this.checkFont();
  }

componentDidMount() {
    disposeOnUnmount(this, reaction(
      () => now('frame'),
      this.updateStats,
      { fireImmediately: true },
    ))
  }
}

componentDidMount(): void {
    document.addEventListener('pointerlockchange', this.onPointerLockChange, false)
    document.addEventListener('mousemove', this.onMouseMove, false)
    document.addEventListener('keydown', this.onKeyDown, false)
    document.addEventListener('keyup', this.onKeyUp, false)
    document.addEventListener('wheel', this.onWheel, false)
    disposeOnUnmount(this, reaction(() => now('frame'), this.onAnimationFrame))
  }

componentDidMount() {
    disposeOnUnmount(this, reaction(() => now('frame'), this.update))
  }

componentDidMount() {
    this.renderer = new WebGLRenderer({ canvas: this.ref!, antialias: true })
    const stage = this.props.stage(this.canvas)
    disposeOnUnmount(this, autorun(() => this.renderStage(stage.get()), { scheduler: requestAnimationFrame }))
  }

componentDidMount() {
    this.update(0)
    this.props.animate && disposeOnUnmount(this, reaction(() => now('frame'), this.update))
  }

componentDidMount() {
    disposeOnUnmount(this, [
      reaction(() => this.props.enter, enter => {
        if (enter) this.enter();
        else this.leave();
      }, {
        delay: Animate.VISIBILITY_DELAY_MS,
        fireImmediately: true,
      })
    ])
  }