FormControl not working Properly in mat-multiselect- Angular Material

Let's discuss overview of code, I have binded student-name in multi-checkbox mat-select angular material.I have binded first three student by default checked On initial loading of application so we can able to see three checkbox of student has checked by default.

application have another condition: from all list of student, user can select any and only three student and if user trying to select more than three student i am showing alert msg "Maximum of 3 Student can be selected!"

 <mat-form-field>
          <mat-select placeholder="Select Error Category"
                      [formControl]="studentdropdownsControl" multiple>
            <mat-option *ngFor="let student of studentdropdowns" [value]="student.value"
              (click)="studentdropdown($event,student,studentdropdownsControl)">
              
            </mat-option>
          </mat-select>
  </mat-form-field>

 studentdropdownsControl = new FormControl();
   selectedstudent =[];
   studentdropdowns = [{value: "Rickey",  id: 0},{value: "JohnSon", id: 1},{value: "Salmon",  id: 2},{value: "vickey", id: 3},{value: "Jony",  id: 4}, {value: "Rock/679",  id: 5},{value: "Batista/641", id: 6},{value: "Sunny/859",  id: 7},{value: "Eliza/1090", id: 8}]

  ngOnit()
  {
    this.getstudentCallsdropdown();
  }


   public async getstudentCallsdropdown(): Promise<void> {

        {
          // Logic to bind by default three student checkbox in dropdown on intial loading 
          this.studentdropdownsControl = new FormControl([this.studentdropdowns[0].value, this.studentdropdowns[1].value, this.studentdropdowns[2].value]);
        }

  }

   public studentdropdown(event: MatOptionSelectionChange, value: string, selectedstudent: any): void {

   //selectedstudent is nothing but value of select and deselect checkbox.
    this.selectedstudent = selectedstudent.id;

     if (this.selectedstudent.length > 3) {
      this.studentdropdownsControl = new FormControl([this.selectedstudent[0], this.selectedstudent[1], 
      this.selectedstudent[2]]);
      alert("Maximum of 3 Studentcan be selected!");
    }
  }

now lets discussed problem in above image i am trying to select vickey and yes am not able to select. it's perfect !, Condition(if (this.selectedstudent.length > 3)) working fine but now look at below image

Once we click on Ok of windows alert

I have selected three student and now when i am trying to select Salmon and here my condition(if (this.selectedstudent.length > 3)) fails and am able to select or mark check to Salmon and interesting thing is it deselect the Vickey automatically. so by checking with other student I have observed one thing "from Upside(top) to Downside(bottom) my condition is working fine and its not working Downside(bottom) to upside(top)".

Why this happening am missing something? or its issue of binding element in array or it's wired behavior of form-control.