[v7] Need a good example of row deletion with button

[dongkyukim00]

I have scoured the internet for a simple example of React Table that renders a button next to each row, and upon clicking, deletes the row. I am not sure why I am having trouble finding this, but when I try to implement this myself, the table renders incorrectly. When delete button is clicked, it removes the last row instead of the selected one. Here is a sample of what I'm trying to do. Any advice?:

import { useMemo, useState } from 'react'
import Button from 'react-bootstrap/Button'
import { useTable } from 'react-table'

export interface TableColumnType {
  Header: string
  accessor: string
  id?: string
  Cell?: () => void
}

export interface TableProps<T> {
  columns: TableColumnType[]
  data: T[]
}

const columns: TableColumnType[] = [
    {
      Header: 'FID',
      accessor: 'fid', // accessor is the "key" in the data
    },
    {
      Header: 'Form #',
      accessor: 'fnum',
    },
  ]

  const data = [
    {
      fid: 'AAA',
      fnum: '111',
    },
    {
      fid: 'BBB',
      fnum: '222',
    },
    {
      fid: 'CCC',
      fnum: '333',
  ]

// Primary table component
export const Table = function <T>(props: TableProps<T>) {
  const { columns, data } = props
  const [dataCopy, setDataCopy] = useState(data)

  const columnsMemo = useMemo(() => columns, [columns])
  const dataMemo = useMemo(() => dataCopy, [dataCopy]) as any[]

  const deleteRow = (rowIndex: number) => {
    const newData = [...dataCopy]
    newData.splice(rowIndex, 1)
    setDataCopy(newData)
  }

  // Add buttons groups to first column of table
  const tableInstance = useTable(
    { columns: columnsMemo, data: dataMemo },
    (hooks) => {
      // Create a column of buttons for row editing
      hooks.visibleColumns.push((columns) => [
        {
          Header: '',
          accessor: 'button_group',
          Cell: ({ row }) => (
            <>
              <Button variant="danger" size="sm" onClick={() => deleteRow(row.index)}>
                Del
              </Button>{' '}
            </>
          ),
        },
        ...columns,
      ])
    }
  )
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = tableInstance

  return (
    <>
      {/* apply the table prop */}
      <table className="formbank-table" {...getTableProps()}>
        <thead>
          {
            // Loop over the header rows
            headerGroups.map((headerGroup) => (
              // Apply the header row props
              <tr {...headerGroup.getHeaderGroupProps()}>
                {
                  // Loop over the headers in each row
                  headerGroup.headers.map((column) => (
                    // Apply the header cell props
                    <th {...column.getHeaderProps()}>
                      {
                        // Render the header
                        column.render('Header')
                      }
                    </th>
                  ))
                }
              </tr>
            ))
          }
        </thead>
        {/* Apply the table body props */}
        <tbody {...getTableBodyProps()}>
          {
            // Loop over the table rows
            rows.map((row) => {
              // Prepare the row for display
              prepareRow(row)
              return (
                <tr {...row.getRowProps()}>
                  {
                    // Loop over the rows cells
                    row.cells.map((cell) => {
                      // Apply the cell props
                      return (
                        <td {...cell.getCellProps()}>
                          {
                            // Render the cell contents
                            cell.render('Cell')
                          }
                        </td>
                      )
                    })
                  }
                </tr>
              )
            })
          }
        </tbody>
      </table>
    </>
  )
}