react hooks form + MUI DatePicker throws an error when selecting a new date

Question

I am trying to wrap MUI date picker to a custom component. Here is what I did:

export interface IMessage {
    id?: string | undefined;
    title?: string | undefined;
    content?: string | undefined;
    date?: Date | undefined;
}

export class Message implements IMessage
{
    @IsNotEmpty({ message: "Az cím kötelező mező!" })
    title: string;
    
    @IsNotEmpty({ message: "A tartalom kötelező mező!" })
    content: string;

    @IsDate({ message: "A dátum kötelező mező!" })
    date: Date;
}

in the page the form (othet part of the code is not relevant):

const executeSubmit = (data: Message): void =>
{
    console.log({...data});
}

<form onSubmit={handleSubmit((data: Message) => executeSubmit(data))}>
  <TextEntry
    control={control}
    margin="normal"
    fullWidth
    id="title"
    label="Cím"
    name="title"
    autoFocus
    value={message.title}
  />
  <MultiLineTextEntry
    control={control}
    margin="normal"
    fullWidth
    name="content"
    label="Tartalom"
    type="text"
    id="content"
    value={message.content}
  />
  <DateTimeEntryEntry
    control={control}
    margin="normal"
    fullWidth
    name="date"
    label="Kezdet időpontja"
    id="date"
    value={message.date}
  />
  <Button
    type="submit"
    fullWidth
    variant="contained"
    sx={{ mt: 3, mb: 2 }}
  >
    Mentés
  </Button>
</form>

and the wrapped Date Picker:

import { DatePickerProps } from "@mui/lab";
import { Control } from "react-hook-form";

export type DateTimeEntryEntryType<TDate extends DatePickerProps<TDate>> = {
  control: Control<TDate, any>;
} & DatePickerProps<TDate>;


import { Controller } from "react-hook-form";
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { MultilineTextEntryType } from "src/components/multilineTextEntry/multilineTextEntry.props";
import { DatePicker, DatePickerProps, LocalizationProvider } from '@mui/x-date-pickers';
import dayjs from "dayjs";

export const DateTimeEntryEntry = (props: MultilineTextEntryType<any>): JSX.Element => {
    const { name, control, label } = props;

     return (
        <Controller control={control}
                    name={name}
                    render={
                        ({
                            field: { onChange, value, ref},
                            fieldState: { error }
                        }) =>
                        (
                            <LocalizationProvider dateAdapter={AdapterDayjs}
                                                  adapterLocale="hu-HU">
                                <DatePicker {...props as DatePickerProps<any>}
                                            onChange={onChange}
                                            value={dayjs(value)}
                                            label={label}
                                            inputRef={ref}
                                            disablePast 
                                            className="mui-date-picker"/>
                            </LocalizationProvider>
                    )}
                    defaultValue={props.value}
        />
    );
}

The form and the DatePiker component receive the correct data, and all is displayed fine. But when I press the submit button i got en error in the console:

at new M (dayjs.min.js:1:1)
at TransformOperationExecutor.transform (TransformOperationExecutor.ts:160:1)
at _loop_1 (TransformOperationExecutor.ts:333:1)
at TransformOperationExecutor.transform (TransformOperationExecutor.ts:167:1)
at ClassTransformer.plainToInstance (ClassTransformer.ts:77:1)
at plainToClass (index.ts:71:1)
at Object.resolver (class-validator.ts:41:1)
at _executeSchema (createFormControl.ts:392:1)
at createFormControl.ts:1112:1
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)

I tried to remove the validation decorators from the Message class, but nothing changed.

thx

Answer 1

I just found out that someone did all this (thnx for it), and we don't have to bother with wrapping all the components.

https://www.npmjs.com/package/react-hook-form-mui