Update kendo angular grid selected rows by (selectionChange) using custom service

I have a kendo-grid with a (selectionChange) attribute where I get my selection using a custom selectionService.ts:

(selectionChange)="selectionService.onSelectionChange($event)"

My selectionService is custom as I have different functionality based on if one item [1] or exactly two [1,2] is selected. If a 3rd row is selected, the third row should shift out the first, so the row would be [2,3]. My code here:

public onSelectionChange(event: SelectionEvent): void {
  if (this.selectedItems!.length + event.selectedRows!.length > 2) {
    this.selectedItems.shift();
  }

  for (let row of event.selectedRows!) {
    this.selectedItems!.push(row.dataItem);
  }

  this.selectedItems = this.selectedItems!.filter(
    item => !event.deselectedRows!.some(row => row.dataItem === item)
  );
}

My problem is my selection works, but visually kendo still keeps the previously selected rows still selected as well. How do I make it so if a 3rd item is selected, the grid also deselects this item?

Stackblitz example:

https://stackblitz.com/edit/angular-pe3m9kdq-6wwuibrm

I have updated your example and used row selection persistence to maintain the selection state in the Grid. Here is the result that meets your requirements:

https://stackblitz.com/edit/angular-pe3m9kdq-i1qt5ben

I hope this helps.