Unable to bind default value using formControl with shared component

I have a custom dropdown in which i need to update or set default value using formControlName. I am using ControlValueAccessors in the shared component so that I can attach formControls to them in parent component and update the formControl values of the form.

Right now I have a issue in setting the default value by using the below code.

this.parentForm = this.fb.group({
  district: ['bangalore', Validators.required], // bangalore should be set as my default value.
  distance: [''],
  state:['']
});

HTML code :

<form [formGroup]="parentForm">
<app-common-dropdown placeHolder="select district" [dropDownId]="'districtLabel'" [dataList]="['bangalore','chennai','pune']" formControlName="district" ></app-common-dropdown>
<app-common-dropdown placeHolder="select distance" [dropDownId]="'distanceLabel'" [dataList]="[100,200,300,400]" formControlName="distance" ></app-common-dropdown>
<app-common-dropdown placeHolder="select state" [dropDownId]="'stateLabel'" [dataList]="['karnataka','tamil nadu','mumbai']" formControlName="state"  ></app-common-dropdown>

I have attached the example code for this https://stackblitz.com/edit/angular-p2gvtm. Kindly look into the demo code and help me as I am feeling that code is being written more for just setting and getting values using formcontrols.

from Unable to bind default value using formControl with shared component