Is there a better way to push a value to a form control with an array as a value in Angular

I currently have a multi-select list that I want to add a value to from the component. The way I am doing it now doesn't update on the UI and it doesn't run my custom validator. If I console the value of the form control, it shows the correct value. Is there a better way to do this or can anyone explain why this is happening?

<mat-form-field appearance="fill">
  <mat-label>Toppings</mat-label>
  <mat-select [formControl]="toppings" multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">
      {{topping}}
    </mat-option>
  </mat-select>
</mat-form-field>
<br />
<button (click)="add()">Add Onion To List</button>

export class SelectMultipleExample {
      toppings = new FormControl([]);
      toppingList: string[] = [
        'Extra cheese',
        'Mushroom',
        'Onion',
        'Pepperoni',
        'Sausage',
        'Tomato',
      ];
    
      ngOnInit() {
        this.toppings.addValidators(this.validator);
      }
    
      add() {
        this.toppings.value.push('Onion');
        console.log(this.toppings.value);
      }
    
      validator(control: AbstractControl): ValidationErrors | null {
        console.log('Checked');
        return null;
      }

https://stackblitz.com/edit/angular-dwztco?file=src/app/select-multiple-example.ts