Как создать надежный ввод даты с последовательным размещением дефиса?

Question

Здесь демонстрация: https://stackblitz.com/edit/react-plqj49

Я хочу создать ввод даты в ReactJS без использования средства выбора даты. Поэтому я попытался воссоздать шаблон ввода даты, который бы автоматически добавлял дефисы, когда пользователь вводил свои символы.

Проблема в том, что мои данные не соответствуют действительности. Например, когда вы играете с клавиатуры, вы можете заканчивать значениями вроде "12-1222-2". когда разрешенный образец is dd-mm-yyyy.

Как создать последовательный ввод даты без календаря, который воспроизводит автоматическое добавление дефисов, когда пользователь вводит свои символы?

Здесь мой ReactJS 'фрагмент:

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      date:""
    };
  }

    handleDateChange=(event) => {
        event.persist()
        let updateDate=this.state.date;

        let datePrecedingLength=updateDate.length 
        let dateCurrentLength=event.target.value.length
        console.log(
            "datePrecedingLength, dateCurrentLength: ",
            datePrecedingLength, dateCurrentLength
        )
        updateDate=event.target.value;
        console.log("updateDate: ", updateDate)
        /*
            console.log("event.target.name in handlechange: ", event.target.name)
            console.log("event.target.value in handlechange: ", event.target.value);

            console.log("event: ", event)
            console.log("event.target.key: ", event.target.key)
            console.log("event.target.keyCode: ", event.target.keyCode)
            console.log("event.which || event.keyCode: ", event.which || event.keyCode)

            console.log("updateDate.length: ", updateDate.length)
        */
        function insert(stringValue, index, string) {
            console.log("this in string prototype insert: ")
            if (index > 0){
                console.log("new string: ", stringValue.substring(0, index) + string + stringValue.substring(index, stringValue.length))
                return stringValue.substring(0, index) + string + stringValue.substring(index, stringValue.length);
            }
            console.log("string + stringValue: ", string + stringValue)
            return string + stringValue;
        };


        this.setState(currentState=>{

            if(event.target.name=== "date"){
                console.log("dateCurrentLength: ", dateCurrentLength)
                // dd-mm-yyyy
                switch(dateCurrentLength){
                    case 2:
                        if(
                            datePrecedingLength ===3 && 
                            dateCurrentLength=== 2
                        ) break
                        updateDate+="-"
                        break
                    case 3:
                        if(datePrecedingLength ===2) updateDate=insert(updateDate, updateDate.length -1, "-");
                        break
                    case 5:
                        // 3 2
                        if(
                            datePrecedingLength ===6 &&
                            dateCurrentLength=== 5
                        ) break
                        updateDate+="-"
                        break
                    case 6:
                        if(datePrecedingLength ===5) updateDate=insert(updateDate, updateDate.length -1, "-");
                        break
                    case 11:
                        return
                    default:
                        break
                }
            }
      console.log("before this.setState return, updateDate value: ", updateDate)
            return ({
                date: updateDate
      })

        });
    };

  render() {
    console.log("this.state.date: ", this.state.date)
    return (
      <div>
        <input 
                        type="text" 
                        placeholder="dd-mm-yyyy" 
                        required 
                        name="date"
                        value={this.state.date}
                        onChange={this.handleDateChange}
                        title="Enter a date in this format dd-mm-yyyy"
                    />      
      </div>
    );
  }
}