Не отображается дата в поле ввода 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, чтобы дата отображалась в нем при выборе?