Angular Material mat-button-toggle-group data binding not working

Question

I currently have a problem with a mat-button-toggle-group in a project. The toggle group has three options. One of these option is not selectable under some circumstances (in the example 'opt2'). The request from my customer is that the option still remains active (although it's forbidden), but when clicked, a snack bar is displayed. Everything works so far, but if I click on opt2, the button 'Forbidden' is displayed as the selected option, although the property "value" does not change. It seems like the data binding gets lost.

https://stackblitz.com/edit/angular-ivy-zrzojr?file=src/app/toggle-group/toggle-group.component.ts

Component:

export class ToggleGroupComponent implements OnInit {
  value = 'opt3';

  constructor(private snackbar: MatSnackBar) {}

  ngOnInit() {}

  change(evt: any) {
    if (evt.value !== 'opt2') {
      this.value = evt.value;
    } else {
      this.snackbar.open(`option ${evt.value} is currently forbidden`, null, {
        duration: 500,
      });
    }
  }
}

Template:

<mat-button-toggle-group [value]="value" (change)="change($event)">
  <mat-button-toggle value="opt1">Opt1</mat-button-toggle>
  <mat-button-toggle value="opt2">Forbidden</mat-button-toggle>
  <mat-button-toggle value="opt3">Opt3</mat-button-toggle>
</mat-button-toggle-group>
<p>Curr value is {{ value }}</p>