[mui-x][DateTimePicker][v6] How to set onChange and onBlur with 3rd party form library?

Question

Code example with Formik (not reproducible): https://stackblitz.com/edit/next-typescript-ffn4ta?file=components/CustomDateTimePicker.tsx

Description

Well, mui-x DateTimePicker v5 used to provide us onBlur or onChange with event, so that we can communicate with 3rd party library (like doing onChange={e => onChange(e.target.value)} or so).

But this time, we have values like date or string instead of event.

How do I manage to it work with Formik (or something else)?

Expected result

I am expecting DateTimePicker to work with Formik (also other 3rd part libs)

Thus, we can use like:

<DateTimePicker
  value={value}
  onChange={newValue => onChange(new ChangeEvent(...))}
  onBlur={() => onBlur(new FocusEvent('blur'))}
/>

Answer 1

Sorry if this isn't answering your question, but you're able to add onFocus and onBlur functionality to date picker with the following! Docs here under the textField slot prop.

    const [isDateFieldFocused, setDateFieldFocused] = useState(false);

    const handleDateFieldFocus = () => {
       setDateFieldFocused(true);
    };

    const handleDateFieldBlur = () => {
       setDateFieldFocused(false);
    };

    <StyledDatePicker
        value={value}
        onChange={(newValue: any) => onChange(newValue)}
        slotProps={{
            textField: {
                onFocus: handleDateFieldFocus,
                onBlur: handleDateFieldBlur,
            },
        }}
    />