How can I let a user enter a partial date and allow the user to clear the selection?

[DarynHolmes]

I would like the user to be able to click a clear button to clear the selection to no selection (undefiend). I would also like the user to enter a partial date. By this I mean using a format of dd-MM-yyyy but allowing the user to enter 1/2/2020.

If I use a control form (setting the value) then the date changes and the curser jumps when entering the partial date. If I don't use a controlled form then I can't clear the field.

In this example (TypeScript) I am able to clear the selection, but It does not allow a user to enter a single digit day or month, without causing UX issues.

import React, { useState } from 'react';
import DayPickerInput from 'react-day-picker/DayPickerInput';
import { DateUtils } from 'react-day-picker';
import 'react-day-picker/lib/style.css';

import dateFnsFormat from 'date-fns/format';
import dateFnsParse from 'date-fns/parse';

function parseDate(str: string, format: string, locale: unknown) {
  const parsed = dateFnsParse(str, format, new Date(), { locale: locale as Locale });
  if (DateUtils.isDate(parsed)) {
    return parsed;
  }
  return undefined;
}

function formatDate(date: Date, format: string, locale: unknown) {
  return dateFnsFormat(date, format, { locale: locale as Locale });
}

export const SecondExample = () =>  {
    const FORMAT = 'dd-MM-yyyy'
    const [currentDate, setCurrentDate] = useState<Date | undefined>()

    const reset = () => {
        setCurrentDate(undefined)
    }

    const onDayChange = (selectedDay: Date) => {
        setCurrentDate(selectedDay)
    }

    return (
        <>
            <DayPickerInput
                value={currentDate}
                formatDate={formatDate}
                format={FORMAT}
                parseDate={parseDate}
                placeholder={'DD-MM-YYYY'}
                onDayChange={onDayChange}
            />
            <button onClick={reset}>Clear</button>
        </>
    )
}