Как объединить ячейки с помощью React-Table

Question

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

const apiResponse = [
    {
      skater: "skater1",
      sponsor: "5Boro",
      sponsorType: "deck",
      yearsSponsored: 0
    },
    {
      skater: "skater1",
      sponsor: "Nike",
      sponsorType: "shoes",
      yearsSponsored: 2
    },
    {
      skater: "skater2",
      sponsor: "Zoo York",
      sponsorType: "deck",
      yearsSponsored: 4
    },
    {
      skater: "skater2",
      sponsor: "adidas",
      sponsorType: "shoes",
      yearsSponsored: 3
    },
    {
      skater: "skater2",
      sponsor: "independent",
      sponsorType: "trucks",
      yearsSponsored: 1
    },
    {
      skater: "skater3",
      sponsor: "Enjoi",
      sponsorType: "deck",
      yearsSponsored: 3
    }
  ]

Я бы хотел объединить ячейки в моем столбце фигуриста и отобразить его как таковой

Я используя react-table, и я хотел бы объединить и отобразить таблицу в похожем стиле сверху, но я даже не знаю, с чего начать. Я прочитал документы и просмотрел примеры, но в этом случае я не могу взломать. Будет ли кто-нибудь достаточно любезен, чтобы помочь мне.

Это мой текущий код.

//DATA SOURCE IS ABOVE. 

import React from "react";
import { useTable } from "react-table";

const data = React.useMemo(() => apiResponse, []);
  const columns = React.useMemo(
    () => [
      {
        Header: "Skater",
        accessor: "skater" // accessor is the "key" in the data
      },
      {
        Header: "Sponsor",
        accessor: "sponsor"
      },
      {
        Header: "Sponsor Type",
        accessor: "sponsorType"
      },
      {
        Header: "Years Sponsored",
        accessor: "yearsSponsored"
      }
    ],
    []
  );
const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable({ columns, data });


   return (
    <div className="App">
      <header className="App-header">
        <table {...getTableProps()}>
          <thead>
            {headerGroups.map(headerGroup => (
              <tr {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map(column => (
                  <th {...column.getHeaderProps()}>
                    {column.render("Header")}
                  </th>
                ))}
              </tr>
            ))}
          </thead>
          <tbody {...getTableBodyProps()}>
            {rows.map(row => {
              prepareRow(row);
              return (
                <tr {...row.getRowProps()}>
                  {row.cells.map(cell => {
                    return (
                      <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                    );
                  })}
                </tr>
              );
            })}
          </tbody>
        </table>
      </header>
    </div>
  );
}

export default App;

Это моя ссылка на песочницу и как она сейчас выглядит.

https://codesandbox.io/s/beautiful-darwin-h30jx?fontsize=14&hidenavigation=1&theme=dark

любое объяснение, направление или пошаговое руководство очень помогут. Спасибо!