React table - how to merge tables for specific column and cell value

This is 2 tables that I've created.

and it's its data

  const callData = [
    { id: 1, type: "call", volume: 50000, strike: 3000 },
    { id: 2, type: "call", volume: 30000, strike: 5000 },
    { id: 3, type: "call", volume: 20000, strike: 7000 }
  ];

  const putData = [
    { id: 1, type: "put", volume: 50000, strike: 3000 },
    { id: 2, type: "put", volume: 10000, strike: 5000 },
    { id: 3, type: "put", volume: 7000, strike: 7000 }
  ];

If you click the row, it will print something like

  const rowOnClick = (row) => {
    let obj = row.values;
    console.log(`clicked ${obj.type} for Strike ${obj.strike}`);
  };

// log "clicked call for Strike 3000"

Now I want to merge these 2 tables together.
The one single table will be like

If I click the row in red box, it should print clicked call for Strike xxx.
If I click the row in green box, it should print clicked put for Strike xxx.

For example, if I click the row in red box for strike 5000, it prints clicked call for Strike 5000

How can I do it?

Codesandbox
https://codesandbox.io/s/vigilant-easley-v6h8p?file=/src/App.js:0-2789
App.js

import React, { useEffect } 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 Table({ columns, data }) {
  // Use the state and functions returned from useTable to build your UI
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable({
    columns,
    data
  });

  const rowOnClick = (row) => {
    let obj = row.values;
    console.log(`clicked ${obj.type} for Strike ${obj.strike}`);
  };

  // Render the UI for your table
  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()} onClick={() => {}}>
            {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()}
              onClick={() => {
                rowOnClick(row);
              }}
            >
              {row.cells.map((cell) => {
                return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

function App() {
  const columns = React.useMemo(
    () => [
      {
        Header: "Info",
        columns: [
          {
            Header: "Type",
            accessor: "type"
          },
          {
            Header: "Volume",
            accessor: "volume"
          },
          {
            Header: "Strike",
            accessor: "strike"
          }
        ]
      }
    ],
    []
  );

  // got below data from async request
  const callData = [
    { id: 1, type: "call", volume: 50000, strike: 3000 },
    { id: 2, type: "call", volume: 30000, strike: 5000 },
    { id: 3, type: "call", volume: 20000, strike: 7000 }
  ];

  const putData = [
    { id: 1, type: "put", volume: 50000, strike: 3000 },
    { id: 2, type: "put", volume: 10000, strike: 5000 },
    { id: 3, type: "put", volume: 7000, strike: 7000 }
  ];

  return (
    <Styles>
      <Table columns={columns} data={callData} />
      <Table columns={columns} data={putData} />
    </Styles>
  );
}

export default App;