DatePicker value is not being read upon submit.

I'm using DatePicker from Material UI with DayJs adapter. https://mui.com/x/react-date-pickers/date-picker/

import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers-pro';
import dayjs, { Dayjs } from 'dayjs';
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs';


And being submitted via useModalForm hook.

const createDrawerFormProps = useModalForm<ICurrencyRate, HttpError, ICurrencyRate>({
    refineCoreProps: {
      action: "create",
      resource: 
currency-rates
,
      redirect: false,
      onMutationSuccess: () => {
        tableQueryResult.refetch();
      }
    },
    warnWhenUnsavedChanges: true,
    modalProps: {
      autoSubmitClose: true,
      autoResetForm: true,
    },
  });


Anyone have any idea what is wrong in my code? I'm new to refine and react as well. Appreciate your help. Thanks!
image.png
image.png
The date picker let the user select a date.
Was this page helpful?