Extracting row data outside of Table

[efrenmarin45]

I am trying to pull the row data from my table and display it to a child Modal component. So essentially, a row of data on my table where the user can click on the row and it would populate on a modal. I am able to use an onClick event to console log the row data on so I know the data is populating in my console. Here is a snippet of my code. To give context, my columns are in a separate file, I also have React-Table-Sticky, and I am running on React-Table v7.6.3.

`export const Table = (props) => {
const {state, dispatch} = useContext(DataContext);
const columns = useMemo(() => GroupedColumns, []);
const data = useMemo(() => state.aircraft.instances, []);

const [showModal, setShowModal] = useState(false);

const openModal = () => {
  setShowModal(prev => !prev);
}

const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    setGlobalFilter,
    prepareRow,
    allColumns,
    getToggleHideAllColumnsProps,
    selectedFlatRows,
    state: { selectedRowIds },
} = useTable({
    columns,
    data,
}, useFilters, useGlobalFilter, useSortBy, useBlockLayout, useSticky, useRowSelect)


const { globalFilter } = state

return ( 
    <>
    <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
    <div className="checkboxes">
        <div>
            <Checkbox {...getToggleHideAllColumnsProps()} />&emsp;Toggle All
        </div>
        {
          allColumns.map(column => (
              <div key={column.id}>
                  <label>
                          <div className="columnCheckbox">
                          <input type='checkbox' {...column.getToggleHiddenProps()} /> {column.Header}
                          </div>
                  </label>
              </div>
            ))
        }
    </div>
    <div className="tableContainer">
        <Styles>
            <div {...getTableProps()} className="table sticky" style={{ width: 1450, height: 750 }}>
                <div className="header">
                {headerGroups.map((headerGroup) => (
                    <div {...headerGroup.getHeaderGroupProps()} className="tr">
                    {headerGroup.headers.map((column) => (
                        <div {...column.getHeaderProps(column.getSortByToggleProps())} className="th">
                        {column.render('Header')}
                        <span className="sortUpDown">
                            {column.isSorted ? (column.isSortedDesc ? "🔼" : "🔽" ) : ''}
                        </span>
                        </div>
                    ))}
                    </div>
                ))}
                </div>
                <div {...getTableBodyProps()} className="body">
                    {rows.map((row) => {
                        prepareRow(row);

                        return (
                        <>
                        <div {...row.getRowProps()} onClick={() => console.log(row.original)} className="tr">
                                {row.cells.map((cell) => (
                            <div {...cell.getCellProps()} className="td" onClick={openModal}>
                                {cell.render('Cell')}
                            </div>
                            ))}
                        </div>
                        {row.isExpanded ? (
                        <div className="tr">
                            <div>
                            {({ Table })}
                            </div>
                        </div>
                        ) : null}
                        </>
                        );
                })}
                </div>
            </div>
        </Styles>
        <Container>
            <Modal
                modalData={data}
                showModal={showModal} 
                setShowModal={setShowModal} />
        </Container>
        </div>
    </>
)}`

I have been through Stack Overflow and the docs and can't seem to figure this out. Every time I try to call 'row' outside of getRowProps it comes up as undefined. ANY help would be appreciated.