Mui datepicker returns inverted day and month

Question

I am creating a date search filter using the datepicker component of mui, when I type the date in the input and click on search the day is inverted with the month.

example: input 03/05/2022 return in console Sat Mar 05 2022 00:00:00.

how can i solve this problem?

const [queryParams, setQueryParams] = useState<DateParams>({
    publishedAt_gte: null,
    publishedAt_lte: null,
});

const getArticles = async () => {
    await axios
        .get(`/articles`, {
            params: {
                _start: 0,
                _limit: '100',
                title_contains: search.title_contains,
                publishedAt_gte: console.log(queryParams.publishedAt_gte),
                publishedAt_lte: console.log(queryParams.publishedAt_lte),
            },
        })
        .then((res) => {
            setArticles(res.data);
        })
        .catch((response) => {
            console.log(response.message);
        });
};

useEffect(() => {
    getArticles();
}, []);

const handleSearch = () => {
    getArticles();
};

<LocalizationProvider dateAdapter={AdapterDateFns}>
    <DatePicker
        views={['day', 'month', 'year']}
        openTo="year"
        disableFuture
        label="From"
        value={queryParams.publishedAt_gte}
        onChange={(date) =>
            setQueryParams({
                ...queryParams,
                publishedAt_gte: date,
            })
        }
        renderInput={(params) => <TextField {...params} />}
    />
    <DatePicker
        views={['day', 'month', 'year']}
        openTo="year"
        disableFuture
        label="Until"
        value={queryParams.publishedAt_lte}
        onChange={(date) =>
            setQueryParams({
                ...queryParams,
                publishedAt_lte: date,
            })
        }
        renderInput={(params) => <TextField {...params} />}
    />
</LocalizationProvider>;

Answer 1

Use the inputFormat prop and set its value to "dd/MM/yyyy".

   <DatePicker
        inputFormat="dd/MM/yyyy" // ?
        views={['day', 'month', 'year']}
        openTo="year"
        disableFuture
        label="Until"
        value={queryParams.publishedAt_lte}
        onChange={(date) =>
            setQueryParams({
                ...queryParams,
                publishedAt_lte: date,
            })
        }
        renderInput={(params) => <TextField {...params} />}
    />