Material UI DatePicker value clears going from MobileView to DesktopView, when using momentjs

Question

Okay so I am using material UI date picker. When i pick a date, the value stays on the input as so:

However, when i was checking the responsiveness, i noticed that when i pick a date in mobile view(floating calender) and then i turn back into desktop view, the value clears like so:

After doing some troubleshooting with a new Datepicker component, i noticed the problem occurs when i use momentjs to directly format the date before storing it in state, this is what i mean.

This is the normal DatePicker component that the problem doesnt occur:

<DatePicker
  defaultValue={selectedDate}
  onChange={newValue => setSelectedDate(newValue)}
/>

This is my DatePicker component that the problem occurs:

<DatePicker
  defaultValue={selectedDate}
  onChange={newValue => setSelectedDate(moment(dayjs(newValue).toDate()).format('DD-MM-YYYY'))}
/>

I have tried consoling out the selectedDate but it still shows me the date '25-01-2024', yet the value is cleared when i change to Mobile/desktop view for some reason, Im not sure what is happening, how do i fix it?