angular 9 ngx datatable not displaying all rows in child component

I have two ngx datatables, one is loading all countries on select of one country display all related states in other ngx datatable from other component. My problem is on selction of country displaying all states correctly(first time), second time when i select other country displaying only one row.

code:
  <ngx-datatable  #dataTable  
              [rows] = "rows"
                 [rowHeight]="35"
                 [headerHeight]="35"
                 [footerHeight]="35"
                 [columns]="columns"
                 [scrollbarV]="true"
                 [columnMode]="'force'"
              
                 >
  </ngx-datatable>

ts:
  editCountry(country: Country,states: StateViewModel[]){

   
    if (country) {
      states.forEach((state, index, states) => {
        (state as any).index = index + 1;
      });
      this.rowsCache = [...states];
      this.rows = [...states];