I am following an example(dynamic Parameters: City Drop Down) from the below link and it's working fine when I use static array data but when I try to bind the same data list from API it's not getting bound initially. It's binding when I edit the drop-down value a second time only. I have tried making the API call as synchronous as well but did not work. Where did I go wrong?

https://www.ag-grid.com/javascript-data-grid/cell-editing/#example-dynamic-parameters

Angular- Html page,

<div *ngIf="isLoaded">
    <ag-grid-angular
        style="width: 1000px; height: 300px;" 
        class="ag-theme-balham"
        [modules]="modules"
        [rowData]="rowData"
        [gridOptions]="gridOptions"            
        (gridReady)="onGridReady($event)"
    ></ag-grid-angular>
</div>

My dynamic ag-grid drop-down field is based on another field Id,

  {
     headerName: 'ScoreDescription', field: 'score',
     cellEditor: 'agRichSelectCellEditor',
     cellRenderer: scoreCellRenderer,
     cellEditorParams: cellCellEditorParams,
     sortable: true, filter: true, minWidth: 300
  },

cellCellEditorParams function is to bind the list of scores dynamically from API,

 scoreList: any = [];
 ...
 ngOnInit(): void {
 const cellCellEditorParams = (params) => {            
  this.kpiProjectService.getScoreDescriptionsByKpiId(params.data.kpiId).then((x)=>{ 
    this.scoreList=x});
              
  return {
    cellRenderer:scoreCellRenderer,
    values: this.scoreList,
  };      ​
 ​...
 ...
 //gridOptions & some other functions, and then closing of ngOnInitFunction

my service or API call,

async getScoreDescriptionsByKpiId(id: number) {
    var ds = await this.http.get<any>(`${environment.services.kpiService.kpiscoresuri}/${id}`)
    .toPromise();
  return ds;
}