Подкомпонент React Table возвращает другую таблицу

У меня есть приведенная ниже таблица React, в которой у меня есть данные в основной таблице, и если вы нажмете на любую стрелку, я покажу другую таблицу под этой строкой. Проблема заключается в том, какую строку вы нажимаете, мне нужно сделать запрос API, получить данные, а затем отобразить. Проблема заключается в том, что возврат внутри this.getDetail не вносит визуальных изменений в подкомпонент. console.info(result) распечатайте правильный массив, полученный из API. Я уже настроил this.getDetail в async-await и работаю с промисом для получения данных. Как я могу исправить это, чтобы отображались полученные данные? Ниже подкомпонент просто возвращает 1

<ReactTable
  data = {dataArray}
  columns = {columns}
  defaultPageSize = {5}
  noDataText = "No Data"
  SubComponent = {row => {
    this.getDetail(
      row.original.cusip,
      row.original.description,
      detailColumns
    ).then(function(result) {
      console.info(result);
      return (
        <ReactTable
          defaultPageSize = {5}
          noDataText = "No Data"
          columns = {detailColumns}
          // data = {Array.from(myDetail)}
          //resolveData = {data => console.info(data)}
          //style = {{ height: "400px" }}
          //showPagination = {false}
        />
      );
    });
    return 1;
  }}
/>