Accessing "More Details" when clicked in a React Table

I am still learning React. I have an array of fake data in a json file that I am using to populate a table that I made with react-table. I have the table as a component. I have added a "Details" button in a column on the table, and when it's clicked, I want a second component to appear on the screen below the table that contains additional details that I could not reasonable fit onto the table. I assume I need to do some sort of handleClick function that's called with the button's onClick, and use that handleClick to setState some information that will let access it through the Details component. On the table component, I did a forEach to assign everything it's own ID number in efforts to use that to somehow call upon that specific item for more details, but I'm not really sure how to utilize that.

App.js

import './App.css';
import Details from './components/Details'
import Table from './components/Table';
import React, { Component } from 'react';

class App extends Component {
  state = {

  }

  handleClick(){
    this.setState({
      
    })
  }

  render() {
    return (
      <>
        <Table />
        <Details />
      </>
    )}
}

export default App;

Table.js

import React, { useMemo } from "react";
import Data from "../sample.json"
import { useTable, useSortBy, usePagination } from 'react-table'
import { Columns } from './Columns'
import './Table.css'


function Table() {

  const columns = useMemo(() => Columns, [])
  const data = useMemo(() => Data, [])

  const { 
    getTableProps, 
    getTableBodyProps,
    headerGroups,
    page,
    nextPage,
    previousPage,
    canNextPage,
    canPreviousPage,
    pageOptions,
    state,
    prepareRow, 
  } = useTable(
    {columns, data, initialState: {pageSize: 5}},
    useSortBy,
    usePagination)
  
    const { pageIndex } = state

    Data.forEach((item, i) => {
      item.id = i + 1
    })

  return (
    <>
      <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps(column.getSortByToggleProps())}>
                {column.render('Header')}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {page.map(row => {
          prepareRow(row)
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => {
                return (
                  <td {...cell.getCellProps()}>
                    {cell.render('Cell')}
                  </td>
                )})}
            </tr>
          )})}
      </tbody>
      </table>
      <div>
        <center>
        <span>
          Page{' '}{pageIndex + 1} of {pageOptions.length}{' '}
        </span>
        <button 
          onClick={() => previousPage()} 
          disabled={!canPreviousPage}>
            Previous
        </button>
        <button 
          onClick={() => nextPage()}
          disabled={!canNextPage}>
            Next
          </button>
          </center>
      </div>
    </>
  )
}

export default Table;

Columns.js

export const Columns = [
  {
    Header: 'ID',
    accessor: 'id'
  },
  {
    Header: 'Payee Name',
    accessor: 'Payee.Name'
  },
  {
    Header: 'Payee Fax',
    accessor: 'Payee.Fax'
  },
  {
    Header: 'Payee Phone',
    accessor: 'Payee.Phone'
  },
  {
    Header: 'Link',
    accessor: '',
    Cell: props => <button onClick={() => {}}>Details</button>
  },
]

Screenshot below is more or less what I want to see. Just a table, and the expanded details for the last item clicked on that table. Right now, I simply have some code mapping over all the data and giving them their own cards. But I just want one at a time, ideally. Current code mapping everything will be below.

enter image description here

import React from 'react';
import Data from '../sample.json'

function Details() {
  return (
    <>
      { Data.map(item => {
        return(
          <div className="item">
            <div className="itemRow1">
              <div>
                <h4>{ item.Payee.Name }</h4>
                <div>{ item.Payee.Phone }</div>
                <div>{ item.Payee.Address.Address1 }</div>
                <div>{ item.Payee.Address.Address2 }</div>
                <div>{ item.Payee.Address.City }</div>
                <div>{ item.Payee.Address.StateOrProvince }</div>
                <div>{ item.Payee.Address.Country }</div>
                <div>{ item.Payee.Address.PostalCode }</div>
                <br/>
                <div>{ item.Payee.Attention} </div>
                <div>{ item.Payee.SubmissionDate }</div>
              </div>
              <div>
                <h4>Payment Information</h4>
                <div>{ item.Payment.PAN }</div>
                <div>{ item.Payment.CVV }</div>
                <div>{ item.Payment.Exp }</div>
              </div>
              <div>
                <h4>Remittance</h4>
                <div>{ item.Remittance.map(payor => {
                  return(
                    <div className="payor">
                      <div>{ payor.PayorName }</div>
                      <div>{ payor.PayorId }</div>
                      <div>{ payor.InvoiceNo }</div>
                      <div>{ payor.Amount }</div>
                      <br/>
                    </div>
                  )})}
                </div>
              </div>
            </div>
            <div>
              {item.Remittance.map(payor => {
                return (
                  <div className="description">
                    {payor.Description}
                  </div>
                )})}
            </div>
          </div> 
        )})}
    </>
  );
}

export default Details;