Не отображается дата в поле ввода react-flatpickr при использовании кастомного компонента TextField из MUI

Я использую компонент Flatpickr из библиотеки react-flatpickr.

Вот такой код работает.

import Flatpickr from "react-flatpickr";
import "flatpickr/dist/themes/airbnb.css";

const CustomInput = ({ value, defaultValue, inputRef, ...props }) => {
    return <input {...props} defaultValue={defaultValue} ref={inputRef} />;
};

export const TestFlatPicker = () => {
    return <Flatpickr
        options={{
            enableTime: false,
            dateFormat: "d-m-Y",
            appendTo: document.body,
        }}
        render={
            ({defaultValue, value, ...props}, ref) => {
                return <CustomInput defaultValue={defaultValue} inputRef={ref} />
            }
        }
    />
}

Это я взял из примера на сайте библиотеки. Но мне нужно вместо input использовать компонент MUI TextField. Вот как я попытался решить эту задачу

import Flatpickr from "react-flatpickr";
import "flatpickr/dist/themes/airbnb.css";
import { TextField } from "@mui/material";

export const TestFlatPicker = () => {
    return <Flatpickr
        options={{
            enableTime: false,
            dateFormat: "d-m-Y",
            appendTo: document.body,
        }}
        render={
            ({defaultValue, value, ...props}, ref) => {
                return <TextField {...props} value={value} defaultValue={defaultValue} ref={ref} />
            }
        }
    />
}

Однако в этом случае, при выборе даты, в текстовом поле не появляется текст с этой датой. Поле остается пустым.

Как правильно подставить компонент TextField, чтобы дата отображалась в нем при выборе?


Ответы (0 шт):