How to display two different values for every row on antd table expanadble when dataSource is a state?

Question

For my antd table expandable, I want to calculate a set of values based on the row of the table. So every row that expands contains unique value, and say my hooks state contains the set of cities out of which for each individual row, there needs to be a filter based on id. How can I set the state to show multiple values for each expandable row click. I have provided dataSource as the state with the set of cities, now I want to dynamically render the data for the expandable table. How can I hold multiple values of the state to display two row values at the same time?

const[cityData, setCityData] = useState()

const cityValues = [{id: 1, city: London},{id: 2, city: Paris} ]

setCityData(cityValues)

<Table
    columns={columns}
    expandable={{
      expandedRowRender,
    }}
    dataSource={cityData}
  />,