Observable array of objects doesn't update

[merrymaker14]

I have in store:

interface IUnderwater {
  alertIsPulsed?: any | null;
  movement?: boolean | null;
  objectId?: number | null;
  pulse?: boolean | null;
  underwater?: boolean | null;
}

class MainPageStore implements IMainStore {
    @observable underwater: IUnderwater[];

    constructor () {
      this.underwater = [];
    }

   @action
    clearUnderwater = () => {
      this.underwater = [];
    };

    @action
    addUnderwater = (objectId: number) => {
      this.underwater.push({
        objectId: objectId
      });
    };

    @action
    clearValueFromUnderwater = (objectId: number) => {
      this.underwater = this.underwater.filter(und => und?.objectId !== objectId);
    };
}

And I use in component function for canvas:

if (!mainStore.underwater.find(und => und?.objectId === value.objectId!)) {
                mainStore.addUnderwater(value.objectId);
                mainStore.underwater[mainStore.underwater.findIndex(und => und?.objectId === value.objectId!)].pulse = null;
              }

              if (mainStore.underwater[mainStore.underwater.findIndex(und => und?.objectId === value.objectId!)].pulse === null) {
                mainStore.underwater[mainStore.underwater.findIndex(und => und?.objectId === value.objectId!)].pulse = true;
                mainStore.underwater[mainStore.underwater.findIndex(und => und?.objectId === value.objectId!)].alertIsPulsed = null;
              }

              if (!mainStore.underwater[mainStore.underwater.findIndex(und => und?.objectId === value.objectId!)].pulse && mainStore.underwater[mainStore.underwater.findIndex(und => und?.objectId === value.objectId!)].pulse !== null) {
                if (value.objectId === highlightAlert) {
                  renderBbox(canvas, value, data, undefined, zoomData, true, 'red', true);
                } else {
                  renderBbox(canvas, value, data, undefined, zoomData, true, 'red');
                }
                renderCbbox(canvas, value, data, config, zoomData);
                renderAlertText(canvas, value, data, config, zoomData);
                renderTracks(canvas, value, data, config);
              } else {
                if (mainStore.underwater[mainStore.underwater.findIndex(und => und?.objectId === value.objectId!)].underwater) {
                  if (value.objectId === highlightAlert) {
                    renderBbox(canvas, value, data, undefined, zoomData, true, 'red', true);
                  } else {
                    renderBbox(canvas, value, data, undefined, zoomData, true, 'red');
                  }
                  renderCbbox(canvas, value, data, config, zoomData);
                  renderAlertText(canvas, value, data, config, zoomData);
                  renderTracks(canvas, value, data, config);
                } else {
                  if (value.objectId === highlightAlert) {
                    renderBbox(canvas, value, data, undefined, zoomData, true, 'black', true);
                  } else {
                    renderBbox(canvas, value, data, undefined, zoomData, true, 'black');
                  }
                  renderCbbox(canvas, value, data, config, zoomData);
                  renderAlertText(canvas, value, data, config, zoomData, 'black');
                  renderTracks(canvas, value, data, config);
                }
              }

              if (mainStore.underwater[mainStore.underwater.findIndex(und => und?.objectId === value.objectId!)].alertIsPulsed === null) {
                mainStore.underwater[mainStore.underwater.findIndex(und => und?.objectId === value.objectId!)].alertIsPulsed = setInterval(() => {
                  if (mainStore.underwater.findIndex(und => und?.objectId === value.objectId!) === -1) {
                    return;
                  }
                  mainStore.underwater[mainStore.underwater.findIndex(und => und?.objectId === value.objectId!)].underwater = !mainStore.underwater[mainStore.underwater.findIndex(und => und?.objectId === value.objectId!)].underwater;
                }, +`${mainStore.settings.pulseIndicationTimeAlert}000`);

                setTimeout(() => {
                  if (mainStore.underwater.findIndex(und => und?.objectId === value.objectId!) === -1) {
                    return;
                  }

                  mainStore.underwater[mainStore.underwater.findIndex(und => und?.objectId === value.objectId!)].movement = true;

                  if (mainStore.underwater[mainStore.underwater.findIndex(und => und?.objectId === value.objectId!)].movement) {
                    mainStore.underwater[mainStore.underwater.findIndex(und => und?.objectId === value.objectId!)].alertIsPulsed = null;
                    mainStore.underwater[mainStore.underwater.findIndex(und => und?.objectId === value.objectId!)].underwater = null;
                    mainStore.underwater[mainStore.underwater.findIndex(und => und?.objectId === value.objectId!)].pulse = false;
                  }
                }, +`${mainStore.settings.delayBeforeMovementAlert}000`);
              }

But when I use
mainStore.clearUnderwater() or mainStore.clearValueFromUnderwater(id) my underwater array still contents objects and it doesn't delete.

I don't understand why objects are added, properties are edited but it won't removed.

[kubk]

Please provide a runnable reproduction here: https://codesandbox.io/s/minimal-mobx-react-project-ppgml?file=/index.js