reactjs добавить новую строку в редактируемую таблицу материалов

Question

Я хочу добавить новую строку с editable-таблицей. Мне нужны такие кнопки, как Сохранить и Отмена при добавлении новой строки. Я хочу добавить новую строку с помощью кнопки + на панели инструментов.

, то есть при нажатии кнопки добавления. Новая строка будет добавлена ​​на стол. Мне нужны кнопки Сохранить и Отменить для новой строки.

Я хочу добавить и сохранить новую запись с помощью кнопки + в правом верхнем углу , как я могу это сделать?

https://codesandbox.io/s/gifted-nash-2s5ff

`

 <MaterialTable
  actions={[
    rowData => ({
      icon: Edit,
      tooltip: "Edit",
      onClick: (event, rowData) => {
        isRowUpdating(rowData, true);
      }
    }),
    rowData => ({
      icon: DeleteOutline,
      tooltip: "Delete",
      onClick: (event, row) => {
        this.bountyModalDeleteForm();
      }
    }),


    {
      icon: Add,
      onClick: (event, rowData) => {
        console.log('New record !');
      },
      isFreeAction: true,
      tooltip: 'New record',
    }
  ]}

  components={{
    EditRow: props => {
      const newRowData = {
        ...props.data,
        id:  props.data.id,
        user: props.data.user,
      };

      return (
        <MTableEditRow
          {...props}
          data={newRowData}
          onEditingCanceled={(mode, rowData) => {
            isRowUpdating(rowData, false);
          }}
          onEditingApproved={(mode, newData, oldRowData) => {
            isRowUpdating(props.data, false);
            this.handleSubmitUpdate(newData);
          }}
        />
      );
    },

    Toolbar: props => (
      <div style={{background: "blue"}}>
        <StyledMTableToolbar {...props} />
      </div>
    ),

`