React table – dynamic group header

This is my data

  const data = [
    {
      date: "2021-01-01",
      options: [
        { isFirst: "y", name: "john" },
        { isFirst: "n", name: "Sam" }
      ]
    },
    {
      date: "2021-11-01",
      options: [
        { isFirst: "n", name: "TY" },
        { isFirst: "n", name: "joe" }
      ]
    }
  ];

My current UI:


This is what I want – the group header should be the date


How to do it?

App.js

import "./styles.css";
import React, { useMemo } from "react";

import MyTable from "./MyTable";

export default function App() {
  const data = [
    {
      date: "2021-01-01",
      options: [
        { isFirst: "y", name: "john" },
        { isFirst: "n", name: "Sam" }
      ]
    },
    {
      date: "2021-11-01",
      options: [
        { isFirst: "n", name: "TY" },
        { isFirst: "n", name: "joe" }
      ]
    }
  ];
  const columns = useMemo(
    () => [
      {
        Header: "Name",
        columns: [
          {
            Header: "Name",
            accessor: "name"
          },
          {
            Header: "First One",
            accessor: "isFirst"
          }
        ]
      }
    ],
    []
  );
  return (
    <div className="App">
      {data.map((d) => {
        return <MyTable data={d.options} columns={columns} />;
      })}
    </div>
  );
}

MyTable.js

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

const Styles = styled.div`
  padding: 1rem;

  table {
    border-spacing: 0;
    border: 1px solid black;

    tr {
      :last-child {
        td {
          border-bottom: 0;
        }
      }
    }

    th,
    td {
      margin: 0;
      padding: 0.5rem;
      border-bottom: 1px solid black;
      border-right: 1px solid black;

      :last-child {
        border-right: 0;
      }
    }
  }
`;

function DataTable(props) {
  const { data, columns } = props;
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable({
    columns,
    data
  });

  return (
    <Styles>
      <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, i) => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map((cell) => {
                  return row.cells.map((cell) => {
                    return (
                      <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                    );
                  });
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
    </Styles>
  );
}

export default DataTable;

Codesandbox:
https://codesandbox.io/s/xenodochial-tamas-ns9ub