我有一个包含Material React Table的DataTable组件。我将列和行数据作为props传递给DataTable组件。我现在想添加一个操作列，有编辑和删除选项。我被困在这里了。我提供我的代码下面，请提供解决方案

<DataTable
                    columns={COLUMN_DATA}
                    columnsUniqueKey='colId'
                    rowsUniqueKey='rowId'
                    rows={ROW_DATA}
                    pagination={false}
 /> 

import React from 'react';
import moment from "moment";
import StatusLabel from "../../../../components/StatusLabel/StatusLabel";
import { Button } from '@material-ui/core';

export const COLUMN_DATA = [
    {
        id: "key",
        label: "Key",
    },
    {
        id: "value",
        label: "Value",
    },
    {
        id: "createdAt",
        label: "Create At",
    },
    {
        id: "updatedAt",
        label: "Updated At",
    },
    {
        id: "actions",
        label: "Actions",
    }
]

const createData = (key, value, createdAt, updatedAt, actions) => {
    return {
        key,
        value,
        createdAt,
        updatedAt,
        actions
    };
}

export const ROW_DATA = [
    createData(
        'IP',
        '12.22.12.10',
        moment().subtract(1, 'day').format('LLL'),
        moment().subtract(1, 'day').format('LLL'),
        <>
            <Button  variant="outlined" size="small" color="primary">
                Edit
            </Button>
        </>
    ),
    createData(
        'IP',
        '12.22.12.10',
        moment().subtract(2, 'day').format('LLL'),
        moment().subtract(2, 'day').format('LLL'),
        <>
            <Button  variant="outlined" size="small" color="primary">
                Edit
            </Button>
        </>
    ),
    createData(
        'IP',
        '12.22.12.10',
        moment().subtract(3, 'day').format('LLL'),
        moment().subtract(3, 'day').format('LLL'),
        <>
            <Button  variant="outlined" size="small" color="primary">
                Edit
            </Button>
        </>
    ),
    createData(
        'IP',
        '12.22.12.10',
        moment().subtract(4, 'day').format('LLL'),
        moment().subtract(4, 'day').format('LLL'),
        <>
            <Button  variant="outlined" size="small" color="primary">
                Edit
            </Button>
        </>
    ),
    createData(
        'IP',
        '12.22.12.10',
        moment().subtract(5, 'day').format('LLL'),
        moment().subtract(5, 'day').format('LLL'),
        <>
            <Button variant="outlined" size="small" color="primary">
                Edit
            </Button>
        </>
    ),
];

和我的DataTable组件文件

import React from 'react';
// styles
import useStyles from "./styles";
import {
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableHead,
    TablePagination,
    TableRow,
    TableSortLabel
} from '@material-ui/core';
import { DATA_TABLE_ROWS_PER_PAGE_OPTIONS } from './constants';


const DataTable = ({ columns, rows, enableActions, pagination, ...props }) => {

  const classes = useStyles();
  const [page, setPage] = React.useState(0);
  const [rowsPerPage, setRowsPerPage] = React.useState(10);

  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = event => {
    setRowsPerPage(+event.target.value);
    setPage(0);
  };

  //Row Click Event
  const onRowClicked = row => (event) => {
    // props.rowClicked(row)
  }


  return (
      <>
        <TableContainer className={classes.container}>
            <Table stickyHeader>
            <TableHead>
                <TableRow>
                {columns.map(({sortable, ...column}) => (
                    <TableCell
                    key={column[props.columnsUniqueKey]}
                    align={column.align}>
                        { sortable ? <TableSortLabel>
                                        {column.label}
                                     </TableSortLabel> : column.label }
                    </TableCell>
                ))}

                {/* { enableActions && <TableCell>
                    Actions
                </TableCell> } */}

                </TableRow>
            </TableHead>
            <TableBody>
                { ( pagination ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) : rows).map(row => {
                return (
                    <TableRow onClick={onRowClicked(row)} hover role="checkbox" tabIndex={-1} key={row[props.rowsUniqueKey]}>
                        { columns.map( column => {
                            const value = row[column.id];
                            return (
                                <>
                                    <TableCell key={column[props.columnsUniqueKey]} align={column.align}>
                                        { column.format && typeof value === 'number' ? column.format(value) : value }
                                    </TableCell>
                                </>
                            );
                        }) }
                        {/* { enableActions && <TableCell> Actions </TableCell> } */}
                    </TableRow>
                );
                })}
            </TableBody>
            </Table>
        </TableContainer>
        {pagination && <TablePagination
            rowsPerPageOptions={DATA_TABLE_ROWS_PER_PAGE_OPTIONS}
            component="div"
            count={rows.length}
            rowsPerPage={rowsPerPage}
            page={page}
            onChangePage={handleChangePage}
            onChangeRowsPerPage={handleChangeRowsPerPage}
        />}
      </>
  );
}

export default DataTable;

我怎样才能添加处理程序编辑按钮，并通过列数据，使我可以处理事件的父组件