Angular 12 Upgrade to typescript 4.3.2 Kendo-grid checkbox issue

I have upgraded my Angular project from Angular 6 to Angular 12 and as a result typescript to 4.3.2. The following code which was working before is not working anymore. onSelectAllChange event, which is fired when all checkboxes are selected is working fine as before. However, onSelectedKeysChange, is not not having the value of mySelection. I’m trying to retrieve the value of this.mySelection[i].RequestNumber in ApproveProjects() where it throws error:

TypeError: Cannot read properties of undefined (reading 'RequestNumber')

Here is my telerik Kendo-grid with checkbox:

<kendo-grid [data]="view" [style.maxHeight.px]="650"
                        [pageSize]="gridState.take"
                        [skip]="gridState.skip"
                        [sort]="gridState.sort"
                        [sortable]="{ mode: 'multiple' }"
                        (sortChange)="sortChange($event)"
                        [filter]="gridState.filter"
                        (dataStateChange)="dataStateChange($event)"
                        [selectable]="{ checkboxOnly: false,mode: 'multiple'}"
                        [kendoGridSelectBy]="mySelectionKey"
                        [selectedKeys]="mySelection"
                        (selectedKeysChange)="onSelectedKeysChange($event)"
                        [pageable]="true"
                        (pageChange)="pageChange($event)"
                        style="height:50vh"
                        filterable="menue"
                        [navigable]="true"
                        [resizable]="true"
                        [reorderable]="true">
                <ng-template kendoGridToolbarTemplate>
                    <label style="font-size:medium">Select Projects to Approve/Reject:</label>
                </ng-template>
                <kendo-grid-checkbox-column width="25">
                    <ng-template kendoGridHeaderTemplate>
                        <input class="k-checkbox" id="selectAllCheckboxId" kendoGridSelectAllCheckbox
                               [state]="selectAllState"
                               (selectAllChange)="onSelectAllChange($event)">
                        <label class="k-checkbox-label" for="selectAllCheckboxId"></label>
                    </ng-template>

                </kendo-grid-checkbox-column>

                <kendo-grid-column field='RequestNumber' title='Project Request#' width='175'>
                </kendo-grid-column>
            //other columns
            </kendo-grid>

Component code:

//this is working fine
public onSelectAllChange(checkedState: SelectAllCheckboxState) {
        if (checkedState === 'checked') {
            this.mySelection = this.localData.map((item) => item);

            this.selectAllState = 'checked';
        } else {
            this.mySelection = [];
            this.selectAllState = 'unchecked';
        }
        this.CallResetSession();
    }
    public mySelectionKey(context: RowArgs): any {
        return context.dataItem;
    }
    public onSelectedKeysChange(e) {
       // const len = this.mySelection.length;
        const len = e.length;
        this.mySelection.length = e.length;

        if (len === 0) {
            this.selectAllState = 'unchecked';
        } else if (len > 0 && len < this.localData.length) {
            this.selectAllState = 'indeterminate';
        } else {
            this.selectAllState = 'checked';
        }
    }
ApproveProjects() {

        if (this.mySelection.length > 0) {
            if (confirm("Are you sure to approve these " + this.mySelection.length + " Project requests?")) {

                for (var i = 0; i < this.mySelection.length; i++) {
                    this.ToApproveProjReqsDelimitedList.push(this.mySelection[i].RequestNumber);
                }
        //rest of the processing
            }
        }
        else {
            alert("Please select at least one item to Approve!");
        }
    }

Please guide