I want to upgarde my (React, mui and formik) codes from mui v4 to mui v5. In mui v4 datepicker needs to be upgraded to x-date-pickers. Here is the codes mui v4 before upgrading within FormikKeyboardDatePicker.tsx:

import React from 'react';
import get from 'lodash/get';
import { UseFormikType } from './useFormikType';
import { KeyboardDatePicker, KeyboardDatePickerProps } from '@material-ui/pickers';

// Extend <KeyboardDatePickerProps> property type with "formik"
type FormikKeyboardDatePickerProps = Omit<Omit<KeyboardDatePickerProps, 'onChange'>, 'value'> & {
  formik: UseFormikType;
  id: string;
};

/**
 * Wrapper of <KeyboardDatePicker> to set value, onChange, error, helperText based on values managed by formik.
 * @param props default <KeyboardDatePicker> properties extended with "formik" parameter
 */
export default function FormikKeyboardDatePicker(props: FormikKeyboardDatePickerProps): JSX.Element {
  const { formik, id, format, ...other } = props;

  if (!id) throw new Error('FormikKeyboardDatePicker "id" property must not be empty');

  return (
    <KeyboardDatePicker
      id={id}
      value={get(formik.values, id, null)}
      onChange={(date) => formik.setFieldValue(id, date)}
      error={get(formik.touched, id, false) && Boolean(get(formik.errors, id))}
      onError={(error) => {
        if (error != null && error !== get(formik.errors, id)) {
          formik.setFieldError(id, error.toString());
        }
      }}
      helperText={get(formik.touched, id, false) && get(formik.errors, id)}
      onFocus={() => {} /* eslint-disable-line @typescript-eslint/no-empty-function */}
      onBlur={(event) => {
        formik.handleBlur(event);
      }}
      format={format ?? 'dd/MM/yyyy'}
      {...other}
    />
  );
}

and here is the code after upgrading to mui v5 within the FormikKeyboardDatePicker.tsx. I have provided the LocalizationProvider in the App.tsx with dayjs. Typescript raised an error for id as can be seen below after this code:

import React from 'react';
import dayjs from 'dayjs';
import get from 'lodash/get';
import { UseFormikType } from './useFormikType';
import { DatePicker, DatePickerProps } from '@mui/x-date-pickers/DatePicker';
import { TextField } from '@mui/material';


type FormikDatePickerProps<TInputDate extends dayjs.Dayjs, TDate extends boolean> = {
  formik: UseFormikType;
  id: string;
} & Omit<DatePickerProps<TInputDate, TDate>, 'onChange' | 'value'>;

/**
 * Wrapper of <DatePicker> to set value, onChange, error, helperText based on values managed by formik.
 * @param props default <DatePicker> properties extended with "formik" parameter
 */
export default function FormikKeyboardDatePicker<TInputDate extends dayjs.Dayjs, TDate extends boolean>(
  props: FormikDatePickerProps<TInputDate, TDate>
): JSX.Element {
  const { formik, id, format, ...other } = props;

  if (!id) throw new Error('FormikDatePicker "id" property must not be empty');

  return (
    <div>
      <DatePicker
        id={id}
        value={get(formik.values, id, null)}
        onChange={(date) => formik.setFieldValue(id, date)}
        error={get(formik.touched, id, false) && Boolean(get(formik.errors, id))}
        onError={(error) => {
          if (error != null && error !== get(formik.errors, id)) {
            formik.setFieldError(id, error.toString());
          }
        }}
        helperText={get(formik.touched, id, false) && get(formik.errors, id)}
        onFocus={() => {} /* eslint-disable-line @typescript-eslint/no-empty-function */}
        onBlur={(event: any) => {
          formik.handleBlur(event);
        }}
        inputFormat={format ?? 'dd/MM/yyyy'}
        {...other}
      />
    </div>
  );
}

Here is where the component is used:

 <Grid item xs={12} sm={6}>
  <FormikKeyboardDatePicker
     formik={formik}
     id="invoiceDetails.paymentDate"
     variant="inline"
     inputVariant="outlined"
     fullWidth
     label="Payment date"
     disabled={promiseInProgress}
   />
 </Grid>

However after migrating to mui v5 i am getting this error about the id:

Type '{ disableFuture?: boolean | undefined; disablePast?: boolean | undefined; shouldDisableDate?: ((day: TInputDate) => boolean) | undefined; shouldDisableMonth?: ((month: TInputDate) => boolean) | undefined; ... 54 more ...; inputFormat: string; }' is not assignable to type 'IntrinsicAttributes & DatePickerProps<TInputDate, TDate> & RefAttributes<HTMLDivElement>'.
  Property 'id' does not exist on type 'IntrinsicAttributes & DatePickerProps<TInputDate, TDate> & RefAttributes<HTMLDivElement>'.ts(2322)

Anybody can tell me where the problem may be?