After editing using a custom date-field(@mui/x-date-pickers/DatePicker), the behavior is the field is sticking onto the screen. This is happening for all the custom input fields. If I use the MRT ‘text’ | ‘select’ fields, when clicking on outside, it’s automatically renders the text value instead of the field.

If i try to edit another field(or clicking on any row/column) then only it is rendered as a text/value.

Adding configurations below.

const table = useMaterialReactTable({
    columns: data.length > 1 ? columnData : [],
    data,
    enableColumnActions: false,
    enableRowActions: editableIcons ? true : false,
    positionActionsColumn: 'last',
    initialState: { showColumnFilters: false, showGlobalFilter: true },
    enablePagination: false,
    enableGlobalFilter: isConfiguredOnTable(searchFilter, false),
    enableDensityToggle: false,
    enableFullScreenToggle: false,
    enableHiding: false,
    enableStickyHeader: true,
    enableRowSelection: isConfiguredOnTable(rowSelect, false),
    displayColumnDefOptions: {
      'mrt-row-actions': {
        header: 'Action Name',
        size: 150,
      },
    },
    renderTopToolbarCustomActions: toolBarBtns
      ? toolBarBtns
      : () => <h3 className={Styles.tableHeading}>{tableName} </h3>,
    renderEmptyRowsFallback: () => <Box className={Styles.emptyWrapper}>{translate('NO_RECORDS')}</Box>,
    renderRowActions: editableIcons ? editableIcons : false,
    enableEditing: enableEditing,
    editDisplayMode: 'cell',
    enableCellActions: true,
    getRowId: getRowId,
    muiTableBodyCellProps: ({ cell, column, table }) => ({
      onClick: () => {
        table.setEditingCell(cell); //set editing cell
      },
      onBlur: (event) => {
        console.log('@123', event);
      },
    }),
  });

Edit configuration:

Edit: ({ column, row, table }: any) => {
        const onAccept = (event: any) => {
          const isoDate = dayjs.utc(event).toISOString();

          row._valuesCache[column.id] = isoDate;
          table.setEditingRow(null);
        };

        return <DatePickerField value={dayjs(row.original.hireDate)} name="hire-date" onAccept={onAccept} />;
      };

Objective:

When i am done editing and clicking on ouside should hide the custom input-field and should show the text-content/value of that field.

Ps: DatePicker doen’t have onBlur, so onAccept. I have tested with @mui/material/TextField. But got the same behavior.
On the side note, I am expecting muiTableBodyCellProps is the place i can make the api call with the modified data. Please correct me if I’m wrong.

Thanks in advance.