Rendering React Table [v7] results in [object Object]

I'm new to Javascript so please bear with me. I'm attempting to render a table of data inside a div and I'm unable to do so. Basically I just want to replace the div in the html with the table div we've created.

I'm using react table v7 with webpack. The following code results in this being seen in the browser where the table should be.

Here is my code:

import { useTable } from 'react-table';
const ReactTable = require('react-table');
import React from 'react';

const tableData = [
    {someColumn: 1, someOtherColumn: 'A'},
    {someColumn: 2, someOtherColumn: 'B'}
]

const columnGenerator = (columnNames) => {
    var updatedNames = columnNames.map(c => {
        return {
            Header: camelToTitle(c),
            accessor: c
        }
    });
    return [
    {
      Header: "Claims Data",
      columns: updatedNames
    },
  ]
};
  
const Table = ({ columns, data }) => {
    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, i) => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map(cell => {
                  return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
                })}
              </tr>
            );
          })}
        </tbody>
      </table>
    );
};

const table = <div>
        <Table 
            columns={columnGenerator(Object.keys(tableData[0]))} 
            data={tableData}
        />
</div>

document.getElementById('claim-table').append(table);

[object Object] is just what is being rendered by converting that table object into a String. I would start by trying to use ReactDOM to mount that node instead of append:

import ReactDOM from 'react-dom'
...

ReactDOM.render(<Table 
                   columns={columnGenerator(Object.keys(tableData[0]))} 
                   data={tableData}
                  />,
                 document.getElementById('claim-table')
                )