Unable to populate dynamic value in MDB Datatables

*_I want to add dynamic value received from JSON Response into MDB Data tables. I was able to do this easily with plain old datatables However with MDB datatables the value never gets populated in table. I am able to see the values sent correctly in JSON response. *_

*_Here is my Code *_

 const columns = [
  { label: 'Market', field: 'market_name' },
  { label: 'Market Code', field: 'market_code' },
  { label: 'Description', field: 'market_description' },
  { label: 'Edit', field: 'id', sort:false },
];

const market_table = new mdb.Datatable(
  document.getElementById('markets'),
  { columns, },
  { 
    loading: true,
    bordered: true,  
    fullPagination: true,
    fixedHeader: true,
    loading:true,
  },

);

fetch('<?php echo site_url("superadmin/market/market_response"); ?>')
  .then((response) => response.json())
  .then((data) => {
    market_table.update(
      {
        rows: data.map((markets) => ({
          ...markets,
          market_name: markets.market_name,
          market_code: markets.market_code,
          market_description: markets.market_description,
          id: '<a href="<?php echo site_url("superadmin/market/edit/"); ?>"'+markets.id+'><i class="fa-solid fa-pen-to-square"></i> </a>',
        })),
      },
      { loading: false }
    );
  });

  document.getElementById('datatable-search-input').addEventListener('input', (e) => {
    market_table.search(e.target.value);
  });