Reactjs – Material UI DatePicker Not Applying dd/MM/yyyy Format in React

I’m working on a React project and facing an issue with the Material UI DatePicker component. Despite setting the date format to "dd/MM/yyyy", the DatePicker displays dates in the "MM/DD/yyyy" format.
CustomDatePicker Component:

import React from 'react';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers';
import TextField from '@mui/material/TextField';
import esLocale from 'date-fns/locale/es';

const CustomDatePicker = ({ label, value, onChange }) => {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns} locale={esLocale}>
      <DatePicker
        label={label}
        value={value}
        onChange={onChange}
        inputFormat="dd/MM/yyyy"
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
};

export default CustomDatePicker;

Usage of CustomDatePicker:

<FormControl variant="outlined" className="form-field">
  <CustomDatePicker
    label="Fecha de Nacimiento"
    value={fechaNacimiento}
    onChange={(newDate) => setFechaNacimiento(newDate)}
  />
</FormControl>

The issue is that the date format displayed in the DatePicker is not "dd/MM/yyyy" as expected according to the configuration. Instead, it’s showing in "MM/DD/yyyy" format.

I’ve verified that fechaNacimiento is a valid Date object. I am also using date-fns with the Spanish locale.

Can anyone help me understand why the date format is not being applied as expected and how I can fix it?

I have tried setting the inputFormat property to "dd/MM/yyyy" in the DatePicker component, expecting the date to be displayed and selected in the day/month/year format. Here’s what I have implemented:

Setting the Locale:
I imported the Spanish locale from date-fns and used it in the LocalizationProvider to ensure that the date format and locale settings are correct.

Configuring the DatePicker:
I configured the DatePicker with inputFormat="dd/MM/yyyy" to display the date in day/month/year format. However, the date still appears in the month/day/year format (MM/DD/yyyy).

Ensuring Correct Date Object:
I verified that the value being passed to the DatePicker (fechaNacimiento) is a valid JavaScript Date object.

Despite these configurations, the date is still being displayed in the MM/DD/yyyy format instead of the expected dd/MM/yyyy format. I’m not sure if I’m missing something in the configuration or if there’s an issue with how the DatePicker component handles the format.