MUI DatePicker not working with react-intl

Question

I have a table where I am modifying the date format based on the locale using this react-intl library.

const intl = useIntl();
<p>
  {intl.formatDate(//DATE)}
</p>

Now i have a date picker using MUI date picker:

   <LocalizationProvider
          dateAdapter={AdapterDateFns}
          adapterLocale={(locales as Record<string, Locale>)[intl.locale]}
        >
          <DatePicker
            value={filterValue?.values?.[0] ?? null}
            onChange={handleDateChange}
            slots={{
              toolbar: DatePickerToolbar,
            }}
          />
        </LocalizationProvider>

When i select locale to be "it" it is working fine but when I am selecting "it-IT" the table is showing in DD/MM/YY format but the datepicker is showing in MM/DD/YY format. How to make both picker and table working on the same format ??