angular reactive form control setValue method not working every time for select control

Question

Descreption

I am facing strange issue with angular reactive form control setValue method mdb-select. when is it binding first time then it is working fine. but whenever kpisCaptionValues variable object is updated from dataFilterService.widgetRequestObjectObservable then after when i am setting value from code from kpisPreviewClick method as in a code. then it is not working. while setting value I am able to debug that I am passing correct value to currentSelectetKpi form control but inside currentSelectetKpi.valueChanges.subscribe value displaying undefined. just unable to know that why it's getting undefined. If any one have faced the same issue then please share with me.

Component Code

export class LineKpisChartComponent implements OnInit, OnChanges {      
    //local variable
    kpisCaptionValues: ValueLabelDictionary[] = [];

    //Form Controls 
    majorKpiForm: FormGroup;
    currentSelectetKpi: FormControl;

    ngOnInit() {     
        this.createFormControls();
        this.createForm();
        this.majorKpiForm.controls.currentSelectetKpi.valueChanges.subscribe(value => {
            //this.bindKpisChanges(); 
        });
    }

    ngOnChanges() {        
        // subscribe observable when filter changed
        this.widgetRequestSubscription = this.dataFilterService.widgetRequestObjectObservable            
            .subscribe(response => {                
                this.getLineKpisDetails();                
            });
    }

    getLineKpisDetails(){
        this.kpisCaptionValues = [];
        this.getLineKpisDetailsSubscription = this.analyticsDashboardService.getLineKpisDetails<AreaKpisResponseAreaKpiValue>(lineKpisRequest, this.lineKpisChartConfig.getKpisUrl).subscribe(response => {
            this.kpisCaptionValues = response.Kpis.map((currElement, index) => {
                return { value: index.toString(), label: currElement.caption };
            });
        }), error => {
            console.log("Error in 'getLineKpisDetails' method : " + error);
            this.dataExists = AnalyticsDataExists.NotExistsForLastThreeYears;
        }               
    }

    createFormControls() {
        this.currentSelectetKpi = new FormControl();
    }

    createForm() {
        this.majorKpiForm = new FormGroup({
            currentSelectetKpi: this.currentSelectetKpi
        });
    }

    kpisPreviewClick(index: number) {                
        this.majorKpiForm.controls.currentSelectetKpi.setValue(index.toString());
    }
}

Html code

<mdb-select formControlName="currentSelectetKpi" [options]="kpisCaptionValues" placeholder="Choose" class="border-bottom-none a-hoverable w-auto"></mdb-select>