react-table:无法在react-table中插入嵌套json数据

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

const data = [
  {
    id: 1,
    name: "John Doe",
    details: {
      age: 30,
      email: "johndoe@example.com"
    }
  },
  {
    id: 2,
    name: "Jane Smith",
    details: {
      age: 25,
      email: "janesmith@example.com"
    }
  }
];

const columns = [
  {
    Header: "ID",
    accessor: "id"
  },
  {
    Header: "Name",
    accessor: "name"
  },
  {
    Header: "Age",
    accessor: "details.age",
    Cell: ({ value }) => <span>{value}</span>
  },
  {
    Header: "Email",
    accessor: "details.email",
    Cell: ({ value }) => <a href={`mailto:${value}`}>{value}</a>
  }
];

const Table = () => {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable({
    columns,
    data
  });

  return (
    <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 => (
                <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
              ))}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
};

export default Table;