Попытка вызвать значение ячейки из функции в таблице реакции v7

Question

Я создаю таблицу с помощью библиотеки react-table. Моя идея состоит в том, чтобы соединить два разных API таким образом, чтобы одно из значений ячейки было из API2, которое связано с API1 на основе значения id.

вот образец значений из API.

1. http: // локальный:8000/ кластеры?format=json

   {"count": 16, "next": null, "previous": null, "results": [{"cluster_id": 4, "module": {"id": 1, "name": "linkedin", "описание": "Коллекция Linkedin для человеческих ресурсов" }, "расписания": ["{'id': 7, 'name': 'mandard_1'}"]....

2. http: // localhost / cluster /<идентификатор_кластера>/ запускается

   { "count": 1, "next": null, "previous": null, "results": [ { "id": 5, "scraping_time": "2020-05-25T18:43:38.309015Z", "start_date": "2020-05-25T18:45:45.912419Z", "end_date": null, "duration": null......

Два набора образцов данных выше связаны. Я считаю, что одна из ячеек таблицы будет содержать значение из данных 2 выше, относящееся к данным 1 в той же строке.

Я хотел сделать это, используя функцию для вызова второго api и извлечения значения для добавления в строку. Я приложил некоторые усилия, но думаю, что делаю это неправильно. Некоторая помощь будет оценена.

вот часть моего текущего кода ниже, я добавил несколько дополнительных комментариев, чтобы вы могли лучше понять, чего я пытаюсь достичь:

import TableContainer from './table';
import { SelectColumnFilter } from './filters';

 //get data from the first api
  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await axios.get('http://localhost:8000/clusters?format=json');
        setdata(res.data['results']);
      } catch (e) {
        console.log(e)
      }
    }
    fetchData();
  }, []);

  console.log(data)
  

//columns and data accessors of the table
  const columns = useMemo(
    () => [
      {
        Header: 'Task Name',
        accessor: 'name',
        disableSortBy: true,
        Filter: SelectColumnFilter,
        filter: 'equals',
      },
      {
        Header: 'Square',
        accessor: 'module.name'
      },
      {
        Header: 'Schedule',
        accessor: 'schedules'
      },
      {
        Header: 'Runs',
        accessor : 'cluster_id'
        Cell : (e) => {
          let url = `http://localhost/cluster/${e.value}/runs`
      console.log('url', url)
      axios.get(url).then(res => { return res.data['count']})},  
      //call function to append needed the value
        disableSortBy: true,
        Filter: SelectColumnFilter,
        filter: 'equals',
      }
    ],
    []
  );



  return (
    <div>
      <TableContainer columns={columns} data={data} />
    </div>
  )
}

export default App;

Спасибо!