For some reason, my ag grid is displaying another grid after the initial one instead of refreshing the grid. The data is coming from an external API. The following is the code;

// Querying the data using fetch and promises
  fetch('http://localhost:3000/viewcontract/'+Entity+'/'+SubEntity+'/'+Account+'')
    // Deserializing the data we received
    .then(response => response.json())
    // We have our data now, we initialize our table
    .then(data => {
      console.log ('display data')
      console.log (data)
    if (data == null) alert ("be bad")
    //setup grid option 
      const gridOption = {
        components: {
          'genderCellRenderer': GenderCellRenderer
        },
        defaultColDef: {
          editable: true,
          resizable: true},
          enableSorting: false,
          rowSelection: 'multiple',
          rowHeight: 40,
          rowData: data,
           onGridReady: function (params) {
        params.api.sizeColumnsToFit();
        var clean = {force: true,};
        params.api.refreshCells(clean); 
        RefreshCellsParams;
        },
      //column definitions 
        columnDefs: [
          {
            headerName: 'Del',
            width: 80,
            editable: true,
            cellRenderer: params => {
              return `<input type='checkbox' ${params.value ? 'checked' : ''} />`;
            },
            field: 'delete-indicator'
          },
        {headerName: "Billing Items", field: "contract_billing_item",
           width: 200, 
           editable: true},
        {headerName: "Range Type", field: "contract_range_type", 
           width:150,
           cellRenderer: 'genderCellRenderer',
           cellEditor: 'agRichSelectCellEditor',
           singleClickEdit : true,
           cellEditorParams: {
               values: ['item cnt', 'acct value']}},
        {headerName: "Range", field: "contract_to_range",
           editable: true, 
           width:150, 
           cellClass: 'ag-right-aligned-cell', 
           valueFormatter: params => {return params.value.toLocaleString();}},
        {headerName: "Rate Type", field: "contract_rate_type",
          width:150,
          cellRenderer: 'genderCellRenderer',
          cellEditor: 'agRichSelectCellEditor',
          singleClickEdit : true,
          cellEditorParams: {
              values: ['flat', 'bps', 'pct']} },
        {headerName: "Rate", field: "contract_rate_amount", 
          width: 100, 
          editable: true, 
          cellClass: 'ag-right-aligned-cell',},
        {headerName: "(+/-)", field: "contract_billing_operator", 
          width:80,
          cellRenderer: 'genderCellRenderer',
          cellEditor: 'agRichSelectCellEditor',
          singleClickEdit : true,
          cellEditorParams: {
              values: ['+', '-']}},
        {headerName: "Add On Type", field: "contract_addon_type", 
          width: 150,
          cellRenderer: 'genderCellRenderer',
          cellEditor: 'agRichSelectCellEditor',
          singleClickEdit : true,
          cellEditorParams: {
              values: ['flat', 'bps', 'pct']}},     
        {headerName: "Add-On Rate", field: "contract_addon_rate_amount", 
          width: 150, 
          editable: true, 
          cellClass: 'ag-right-aligned-cell'},
        {headerName: "Min", field: "contract_minimum_fee", 
          width: 100, 
          editable: true, 
          cellClass: 'ag-right-aligned-cell',
          valueFormatter: params => {return params.value.toLocaleString();}},
        {headerName: "Max", field: "contract_maximum_fee", 
          width:100, 
          editable: true, 
          cellClass: 'ag-right-aligned-cell', 
          valueFormatter: params => {return params.value.toLocaleString();}},
        {headerName: "Specials", field: "specials", 
          width:200,
          cellRenderer: 'genderCellRenderer',
          cellEditor: 'agRichSelectCellEditor',
          singleClickEdit : true,
          cellEditorParams: {
              values: ['exception', 'exemption', 'specials', 'n/a']}}
        ],} 

              
      //call AG Grid  
        const gridDiv = document.querySelector('#selectionGrid');
        new agGrid.Grid(gridDiv, gridOption);
        })
}

}

I tried to use params.api.refreshCells but it didn't work. I was expecting the grid to be refresh and load with the new data.