How to render nested values of same parent in MUI datagrid column?

Question

This is the data that I want to display in the datagrid.

[
  {
    "state": "UP",
    "prominentCities": {
      "capital": "Lucknow",
      "LargestCity": "Noida"
    }
  },
  {
    "state": "Gujarat",
    "prominentCities": {
      "capital": "Gandhinagar",
      "LargestCity": "Ahmedabad"
    }
  }
]

I want to present this information in the datagrid in the following format-

Column definitions:

 const columns = [
    { field: "state", headerName: "State", width: 100 },
    { field: "prominentCities", headerName:"Largest City",
        renderCell:(params)=>(<div>{params.value.prominentCities.LargestCity}</div>)},
    /*{ What should the column field for showing Capital}*/ 
   ]

What is the way to display state->prominentCities->capital?