How to integrate timepicker in material-table

Question

How can I access a row in material-table (in editable mode) and integrate a timepicker from materialui?

<MaterialTable
    title=""
    columns={columns}
    data={state.data}
    editable={{
      onRowAdd: newData =>
        new Promise(resolve => {
          setTimeout(() => {
            resolve();
            setState(prevState => {
              const data = [...prevState.data];
              data.push(newData);
              return { ...prevState, data };
            });
          }, 600);
        }),

      //onRowUpdate...

      //onRowDelete...

    }}
  />

fields to change (yellow):

Answer 1

Update:

update to 1.69.0 to solve this issue.

---

Seems like the SandBox code from the accepted answer is not working anymore. I created a new codesandbox here just for others who are looking for a working code.

Note: Warning: Unknown event handler property `onBulkEditRowChanged`. It will be ignored.

is an issue with latest version (1.68.0) of material-table.

Added: To fix the above issue, for now - 2020/08/16, we need to use 1.66.0

In 1.67.1 still, some warnings appeared.