DatePicker parse problem with date format

[ugoQ]

Describe the bug
First, I'd like to apologize if the problem is related to rff itself and not mui-rff, I just can't find a way to resolve this.
My problem is that I have a KeyboardDatePicker with the format dd/MM/yyyy and I don't want it's value stored as a Date in rff, I want it to be stored as a string with the dd/MM/yyyy format. The thing is, it's value is stored with the good format in the rff values, but the date is not good in the input (the months and days are inverted).

To Reproduce
Ok here is what I got.
First, my App is wrapped with a
<MuiPickersUtilsProvider utils={DateFnsUtils} locale={frLocale}></MuiPickersUtilsProvider>

In my component, I have this:

import { format } from "date-fns";
import { KeyboardDatePicker } from "mui-rff";

<KeyboardDatePicker
  name={code}
  label={label}
  cancelLabel={"ANNULER"}
  okLabel={"FERMER"}
  clearLabel={"EFFACER"}
  autoOk
  clearable
  format="dd/MM/yyyy"
  autoComplete="off"
  fieldProps={{
    parse: value => format(value, 'dd/MM/yyyy')
  }}
/>

Expected behavior
So, when I click on a day in the calendar, the value in rff is good with the format dd/MM/yyyy, but the value in the input is not good, the months and the days are inverted.
Examples:
- if I click on the 4th of August 2021 (04/08/2021 in my desired format), the value in the input becomes 08/04/2021 (value is 04/08/2021 in rff)
- If I click on a day greater than 12, the value is not even set on the input, but is changed in rff

Any help would be gladly appreciated.

[lookfirst]

Hey, thanks for this. I'm going to move this to a discussion since it isn't really an issue per say. =) Let's continue over there...

[lookfirst]

I guess I'm a little bit confused. If you could create a simple codesandbox that demonstrates the issue, that would be really helpful.

You can base it on a fork of this one.

[optyler]

Well, I tryed to fork a codesandbox and I could reproduce this too
https://codesandbox.io/s/react-final-form-material-ui-example-tno64?file=/src/index.tsx

[optyler]

oops, you right
https://codesandbox.io/s/react-final-form-material-ui-example-forked-0rguh

[optyler]

The OP should validate the sandbox IMO, but I can clearly see the behavior he described.

If you pick anything before the 12 of the mounth, the input is updated and the state too, but if you take something after the 12, only the state is updated

[lookfirst]

pretty sure it is double formatting, which is what is messing things up.

remove this:

            fieldProps={{
              parse: value => format(value, 'dd/MM/yyyy')
            }}

What I would do is if you aren't needing to display the value anywhere else on the page, just format things the way you want, in the onSubmit().

If you do need it to update elsewhere on the page, format it as you're rendering it.

[ugoQ]

Thanks for the sandbox and all you two. I guess I'll have to do the work on the onSubmit().
I did want to avoid that because the form is dynamically built and the onSubmit was not supposed to know/alter the values it received.

[lookfirst]

Even more so then... look at the type of data you're dealing with and convert accordingly. doing this conversion every single time someone changes a date will have slight performance impacts on large forms.