When I checked a checkbox and within few second automatically select another checkbox in a table

I want to get data from the service file and display that data on a table and select some data using checkbox. but When I checked a checkbox my checkbox position is changed time to time.How to solve that. Please help me.

here is my visibility.ts code:

export class VisibilityComponent implements OnInit {
  check = false;
  isActive = true;
  pmDetails1: IEmployee[];
  selectedEmployee = [];

  constructor(private userService: UserService,
    public dialogRef: MatDialogRef<VisibilityComponent>,
     @Inject (MAT_DIALOG_DATA) public data) {}

  ngOnInit() {
    this.userService.getAllUsers().subscribe((pmDetails1: IEmployee[]) => {
      this.pmDetails1 = pmDetails1;
      console.log(pmDetails1);
    })

    this.selectedEmployee = new Array<number>();
  }

 onItemChange(value) {
    if (value === '1' ) {
      this.check = true;
      for (let i = 0; i < this.pmDetails1.length; i++) {
        this.selectedEmployee[i] = this.pmDetails1[i].firstName;
        
      }
      console.log(value);
      console.log(this.selectedEmployee);
    } else {
      this.check = false;
      this.selectedEmployee = [];
      console.log(this.selectedEmployee);
    } 
  }

  onSelectedEmployee(event) {
    
    const index = this.selectedEmployee.indexOf(event.target.value);
    if (index === -1) {

      this.selectedEmployee.push(event.target.value);

    } else {
      this.selectedEmployee.splice(index, 1)
    }
  }
 }

}

here is my .html code

<div>
      <cdk-virtual-scroll-viewport itemSize="50" class="dialogbox-viewport">
        <table class="table table-light" style="border: 1px solid">
          <thead style="background-color: aqua">
            <tr>
              <th>Select</th>
              <th>Name</th>
              <th>Role</th>
            </tr>
          </thead>

          <tbody>
            <tr *cdkVirtualFor="let p of pmDetails1">
              <td>
                <input type="checkbox" [value]="p.userId" (change) = "onSelectedEmployee($event)" id="" /> 
              </td>
              <td> </td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </cdk-virtual-scroll-viewport>
    </div>

here are the photos of that: before I selected 1st checkbox it displays as follow enter image description here

after that, I selected a 1st checkbox("madumal") and scroll down and see again my selected checkbox but it does not focus on the "madumal". like below enter image description here

please help me