React Material - MUIDataTable - how to update row data

I'm looking to implement an efficient way of updating individual row entries.

My way seems does not work. Just to add, i'm getting my data from redux state. I was contemplating on using popup modals but i'm looking to implement a more efficient way.

// action
import { HrEmployeeData } from "../../actions/employeeHR";



const EmployeeTable = (props) => {

  useEffect(() => {
    props.HrEmployeeData();
  }, []);

  const classes = useStyles();

  const columns = [
    { name: "name", label: "Name" },
    { name: "phone_no", label: "Contact" },
    { name: "email", label: "Email" },
    { name: "department", label: "Department" },
    { name: "job_title", label: "Title" },
    { name: "salary", label: "Salary" },
    { name: "date_employed", label: "Date Employed" },
    {
      name: "Action",
      options: {
        filter: true,
        sort: false,
        empty: true,
        customBodyRender: (value, tableMeta, updateValue) => {
          return (
            <button
              onClick={() =>
                window.alert(`Clicked "Edit" for row ${value}`)
              }
            >
              Edit
            </button>
          );
        },
      },
    },
  ];

return (
    <div className={classes.root}>
      <Grid container spacing={3}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>
            <MUIDataTable
              title={"Employees Records"}
              data={props.employeesDetail}
              columns={columns}
              options={options}
            />
          </Paper>
        </Grid>
      </Grid>
    </div>
  );
};
export default connect(mapStateToProps, { HrEmployeeData })(EmployeeTable);