Как обновлять элементы внутри состояния асинхронно

У меня такое состояние:

this.state = {
  data: [
    {id: 1212, cat:"cat1"},
    {id: 13123, cat:"cat1"},
    {id: 1212, cat:"cat2"},
    {id: 13123, cat:"cat2"},
    {id: 1212, cat:"cat3"},
    {id: 13123, cat:"cat3"},
    {id: 1212, cat:"cat4"},
    {id: 13123, cat:"cat4"},
    ..
  ]
}

У меня есть идентификаторы и кошка (категории). Все данные динамические, я не знаю, какие идентификаторы и коты будут извлекаться каждый раз.

in the componentDidMount(){
  // I fetch the latest data and sort it based on cat and  `setState` for `this.state.data`
}

in the componentDidUpdate(){
  // I will get the all the unique cats from this.state.data and store it in an array.
  // I will loop over the unique cats and fetch some more data related to each cat. But this will be aynchronous
  // Now how to add the fetched data for each cat at all the places wherever that cat is there in the this.state.data

  // i.e
    i am expecting this.state.data to be
      {
        data: [
          {id: 1212, cat:"cat1", extra:'....'},
          {id: 13123, cat:"cat1", extra:'....'},
          {id: 1212, cat:"cat2", extra:'....'},
          {id: 13123, cat:"cat2", extra:'....'},
          {id: 1212, cat:"cat3", extra:'....'},
          {id: 13123, cat:"cat3", extra:'....'},
          {id: 1212, cat:"cat4", extra:'....'},
          {id: 13123, cat:"cat4", extra:'....'},
          ..
        ]
      }

}

Как добавить новое свойство к данным на основе этой конкретной кошки асинхронно.