Отображать элементы массива в подстроке (таблица реакции)

Я использую реагирующую таблицу, и мне нужно создать подстроки со структурой данных ниже. Я успешно создал подстроки для каждого объекта в массиве данных. Однако каждый объект в массиве данных содержит другой массив «типов».

Как мне заставить каждую строку перечислять имена «типов» в качестве подстрок?

Мой код пока ниже:

Стол:

import React from 'react';
import ReactTable from 'react-table';

const Table = (props) => {
  const subComponent = row => {
    return (
      <div>
        Names of "types" here respectively for each object in data array
        (no column headers or anything needed)
      </div>
    );
  };

  return (
    <ReactTable data = { props.data }
      columns = { props.columns }
      SubComponent = { subComponent } />
  );
};

export default Table;

Структура данных:

const data = [
  {
    id: '12345',
    name: 'sports',
    types: [
      {
        name: 'basketball',
        id: '1'
      },
      {
        name: 'soccer',
        id: '2'

      },
      {
        name: 'baseball',
        id: '3'
      }
    ]
  },
  {
    id: '678910',
    name: 'food',
    types: [
      {
        name: 'pizza',
        id: '4'
      },
      {
        name: 'hamburger',
        id: '5'

      },
      {
        name: 'salad',
        id: '6'
      }
    ]
  }
];