Newly added options in existing select control is not reflecting in view in angular

I have initialized a list of options for my DDL and later I want to add some more options to the same DDL. In the console, it shows that those options are added but in view, it's not reflecting the changes.

Below is my code and explanations:

1. Initialized the list (Select with optgroup)

this.optList1 = [
    {
        "RuleId": 104,
        "RuleName": "Rule 104",
        "IsActive": true,
    },
    {
        "RuleId": 105,
        "RuleName": "Rule 105",
        "IsActive": true,
    }
];

this.optGroup = [];
const obj1 = {
    name: 'Group 1',
    rule: this.optList1
};
this.optGroup.push(obj1);

2. Later in some function call I'm adding some more options in the same DDL

this.optList2 = [
    {
        "RuleId": 111,
        "RuleName": "Rule 111",
        "IsActive": true,
    },
    {
        "RuleId": 112,
        "RuleName": "Rule 112",
        "IsActive": true,
    }
];
const obj2 = {
    name: 'Group 2',
    rule: this.optList2
};
this.optGroup.push(obj2);

Here is HTML:

<mat-form-field>
    <mat-select formControlName="rules" multiple [compareWith]="compareRule">
        <mat-optgroup *ngFor="let group of optGroup" [label]="group.name">
            <ng-container *ngIf="group.name == 'Group 1'">
                <mat-option *ngFor="let rule of group.rule" [value]="rule"></mat-option>
            </ng-container>
            <ng-container *ngIf="group.name == 'Group 2'">
                <mat-option *ngFor="let rule of group.rule" [value]="rule"></mat-option>
            </ng-container>
        </mat-optgroup>
    </mat-select>
</mat-form-field>

All the options are showing in the console but not reflecting in view.

from Newly added options in existing select control is not reflecting in view in angular