typescript - Material UI Grid: Cum pot folosi un câmp încorporat ca un câmp GridColDef?

Am un răspuns json cu date imbricate și trebuie să acces aceste date imbricate pentru a le afișa în cadrul grilei, dar acceptă doar șiruri de caractere ca parametri.

Am încercat să folosesc notația cu punct, dar nu a funcționat. Există vreo modalitate de a o face să funcționeze sau ar trebui să fac doar maparea datelor într-un obiect nou și să folosesc doar acela pentru Grid?

const columns: GridColDef[] = [
    { field: `area.name`, headerName: 'AREA', minWidth: 120 },
    { field: 'costCenter', headerName: 'C. COSTO', minWidth: 120, flex: 4 },
    {
      field: '_',
      minWidth: 140,
      headerName: 'ACCIONES',
      align: 'center',
      headerAlign: 'center',
      renderCell: (params: GridRenderCellParams) => (
        <Tooltip title='Eliminar' placement='top' enterDelay={1000} leaveDelay={0} arrow>
          <i className='tabler-trash text-red-500 text-[20px]' />
        </Tooltip>
      )
    }
  ]

aceasta este răspunsul de la API

{
  "businessType": "GIRAS VENTAS",
  "area": [
    {
      "area": {
        "code": "G",
        "name": "GIRAS"
      },
      "costCenter": "15-05"
    },
    {
      "area": {
        "code": "E",
        "name": "EUROPA"
      },
      "costCenter": "17-07"
    }
  ]
}

EDITARE:

Deci, da, am mapat obiectul într-unul mai prietenos, dar îl urăsc

setFormattedData(data.area.map(e => {return {name: e.area.name, code: e.area.code, costCenter: e.costCenter}}))