Update react table row with the modal's input field data - React Table

I have a react table which will open a modal upon button click. Inside the modal there is input field and I need to update the react table row with the value of input field on 'save' button click which is also inside the modal. How do I achieve that.

The flow is like this : react table --> click any row --> opens the modal --> add data into modal field and click save --> modal closes and the data is sent to the parent component --> update that data into one column of the clicked row

myTable.tsx

 <BTable striped bordered hover size="sm" {...getTableProps()}>
            <thead>
              {headerGroups.map((headerGroup: any, thKeyIdx: number) => (
                <tr key={thKeyIdx} {...headerGroup.getHeaderGroupProps()}>
                  {headerGroup.headers.map((column: any, idx: number) => (
                    <Fragment key={`${thKeyIdx}${idx}`}>
                      <th {...column.getHeaderProps()}>
                        <span {...column.getSortByToggleProps()}>
                          {column.render('Header')}
                          <span>{sortOrder(column.isSorted, column.isSortedDesc)}</span>
                        </span>
                        <div>{column.canFilter ? column.render('Filter') : null}</div>
                      </th>
                      {idx === headerGroup.headers.length - 6 && <th>Action</th>}
                    </Fragment>
                  ))}
                </tr>
              ))}
            </thead>
            <tbody {...getTableBodyProps()}>
              {page.length === 0 ? (
                <tr className="no-records">
                  <td colSpan={8}>No records found !!!</td>
                </tr>
              ) : (
                page.map((row: any, tdKeyIdx: number) => {
                  prepareRow(row);
                  return (
                    <tr key={tdKeyIdx} {...row.getRowProps()}>
                      {row.cells.map((cell: any, index: number) => (
                        <Fragment key={`${tdKeyIdx}${index}`}>
                          <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                          {index === row.cells.length - 6 && (
                            <td className="view">
                              <button
                                type="button"
                                onClick={() => viewActionModalOpen(row.original)}
                              >
                                {row.original.status === PENDING ? (
                                  <i className="fa fa-pencil-square-o" aria-hidden="true" />
                                ) : (
                                  <i className="fa fa-eye" aria-hidden="true" />
                                )}
                              </button>
                            </td>
                          )}
                        </Fragment>
                      ))}
                    </tr>
                  );
                })
              )}
            </tbody>
          </BTable>

**myTable columns **

 const COLUMNS: Array<object> = useMemo(
    () => [
      {
        Header: 'Transaction ID',
        accessor: 'tx_id',
        disableFilters: true,
      },
      {
        Header: 'Incident ID',
        accessor: 'incident_id',
        disableFilters: true,
      },
      {
        Header: 'Resolved Status',
        accessor: 'resolvedstatus',
        disableFilters: true,
      },
      {
        Header: 'Resolved Comments',
        accessor: 'resolved_comments',
        disableFilters: true,
      },    
    ],
    [],
  );

I was able to pass the input value from modal to the parent field using props. To set the value into react table of a particular cell, I passed the id of the clicked row onClick.

<td className="view"> <button type="button" onClick={() => ModalOpen(row.id)}>

states for row id and table data

const [tData, setTData] = useState<Array<any>>([]);
const [rid, setid] = useState<number>();


const btnSaveClick = (e: any) => {
const updatetable: any[] = [...tData];
if (rid !== undefined) {
  updatetable[rid].id_column = value;
  setTData(updatetable);
  modalClose();
}
  };