Uncaught RangeError: Invalid time value when dayjs tries to parse date

Question

const bday = "01.01.2000";

const [datePickerValue, setDatePickerValue] = useState<Dayjs | null>(dayjs(bday));

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <DatePicker
    label="Birthday"
    format="DD.MM.YYYY"
    minDate={dayjs("01.01.1950")}
    value={datePickerValue}
    onChange={(newValue) => setDatePickerValue(newValue)}
  />
</LocalizationProvider>

Error:

Uncaught RangeError: Invalid time value

This happens when the user starts setting the year, i.e: default year is this year 2023 and when the user starts typing the year manually to write the year 2001, it begins by making them all zeros like in the example below:

step 1: 0000
step 2: 0002
step 3: 0020
step 4: 0200
step 5: 2001

As long as it starts typing, dayjs package will not be able to process and it will result to the error above, now my question is this:

How can I prevent this behaviour?