Angular- Checkbox using reactive form

I have recently started using reactive forms. I was making 3 checkboxes with value 3 different values. Here in the 3rd checkbox, there is a select all selecting which should select all the checkboxes. I tried this one TS code:

  formData: FormGroup;
  gender: Gender[] = [
    {
      type: 'Male',
      value: '1',
    },
    {
      type: 'Female',
      value: '0',
    },
    {
      type: 'All gender',
      value: '5',
    },
  ];

  constructor() {
    this.formData = new FormGroup({
      gender_Form: new FormControl(''),
    });
  }

  ngOnInit() {
    //console.log('formData =>', this.formData);
  }

  genderSelection(data: any) {
    //console.log('data =>', data);
    console.log('checkbox =>', data.checked);
    console.log('value =>', data.value);
    const control = this.formData.controls['gender_Form'];
    if (data.value == '5') {
      control.setValue(
        this.gender.map((i) => {
          console.log('selected =>', i);
          i.type;
        })
      );
      console.log('gender =>', control);
    }
  }

HTML code:

  <div [formGroup]="formData" *ngFor="let data of gender">
  <input
    class="form-check-input"
    formControlName="gender_Form"
    type="checkbox"
    id="checkBox_"
    value=""
  />
  <label class="form-check-label" for="checkBox"></label>
  </div>

Here, even though selecting the select all checkbox, do ticks the rest of the boxes I was unable to see the values when I console logged console.log('gender =>', control);. Thanks for the help in advance