Placing array of objects as a table inside a cell [v6]

[vjr12]

I am trying to implement a table where in some of the data that I receive from backend is a nested array of objects and I want to display it in a cell of that column like a table with key value pair

 const data = [
      {
        firstName: "Jack",
        status: "Submitted",
        nested: [
          {
            name: "test1",
            value: "NA"
          },
          {
            name: "test2",
            value: "NA"
          }
        ],
        age: "14"
      }
    ];

I am able to place the rest of the fields(except nested) that I receive from the API . Can someone help how to place this array of objects inside of a cell as table like key value pairs

I am using react table v6 for this application

Sandbox: https://codesandbox.io/s/react-table-row-table-47192

Want the output something like

+-----------+-----------+-----+--------------+
| firstname | status    | age | nested       |
+-----------+-----------+-----+--------------+
| Jack      | Submitted | 14  | name  value  |
|           |           |     | -----------  |
|           |           |     | test1  NA    |
|           |           |     |              |
|           |           |     | test2  NA    |
+-----------+-----------+-----+--------------+
| Simon     | Pending   | 15  | name  value  |
|           |           |     |              |
|           |           |     | -----------  |
|           |           |     |              |
|           |           |     | test3  NA    |
|           |           |     |              |
|           |           |     |              |
|           |           |     | test4  Go    |
+-----------+-----------+-----+--------------+

import * as React from "react";
import { render } from "react-dom";
import DataGrid from "./DataGrid";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      columns: [],
    };
  }

  componentDidMount() {
    this.getData();
    this.getColumns();
  }

  getData = () => {
    const data = [
      {
        firstName: "Jack",
        status: "Submitted",
        nested: [
          {
            name: "test1",
            value: "NA"
          },
          {
            name: "test2",
            value: "NA"
          }
        ],
        age: "14"
      },
      {
        firstName: "Simon",
        status: "Pending",
        nested: [
          {
            name: "test3",
            value: "NA"
          },
          {
            name: "test4",
            value: "Go"
          }
        ],
        age: "15"
      }
    ];
    this.setState({ data });
  };

  getColumns = () => {
    const columns = [
      {
        Header: "First Name",
        accessor: "firstName"
      },
      {
        Header: "Status",
        accessor: "status"
      },
      {
        Header: "Age",
        accessor: "age"
      },
      {
        Header: "Nested",
        id: "nested",
        accessor: data => {
          let output = [];
          data.nested.map(item => {
            return output.push(item.value);
          });
          return output.join(", ");
        }
      }
    ];
    this.setState({ columns });
  };

  render() {
    return (
      <>
        <DataGrid
          data={this.state.data}
          columns={this.state.columns}
        />
      </>
    );
  }
}