Event "OnKeyDown'' некорректно работает в react приложении

Всем привет. Я новичок в веб-разработке. Не могу понять проблему. Моя задача - возможность изменения частей инпута (день, месяц и год), используя комбинацию ctr + ArrowUp (увеличение) и ctr + ArrowDown (уменьшение). Также изменяемая часть инпута должна выделяться - это достигается отслеживанием положения курсора (selectionStart). Код работает, но когда я хочу увеличить или уменьшить «год» по какой-то причине ивент «OnKeyDown» выполняется только один раз, и последующие нажатия других кнопок не дают результат. Почему так происходит?

sandbox snippet

Мой код

import React, { useState, useEffect, useRef } from "react";
import styles from "./DataInput.module.css";

const cur_date = new Date();

const DataInput = () => {
  const inputEl = useRef();
  const [selection, setSelection] = useState();
  const [currentDate, newCurrentDate] = useState();

  const date_format = cur_date
    .toLocaleString()
    .replaceAll(".", "/")
    .replace(",", "");

  const [value, setValue] = useState(date_format);

  useEffect(() => {
    if (!selection) return; // prevent running on start
    const { start, end } = selection;
    inputEl.current.focus();
    inputEl.current.setSelectionRange(start, end);
  }, [selection]);

  const keyHandler = (e) => {
    if (e.ctrlKey && e.key === "ArrowUp") {
      e.preventDefault();
      if (
        inputEl.current.selectionStart >= 0 &&
        inputEl.current.selectionStart <= 1
      ) {
        console.log("Selection confirm!");
        setSelection({ start: 0, end: 2 });
        const newDay = cur_date.setDate(cur_date.getDate() + 1);
        setValue(
          new Date(newDay)
            .toLocaleString()
            .replaceAll(".", "/")
            .replace(",", "")
        );
      }
      if (
        inputEl.current.selectionStart >= 3 &&
        inputEl.current.selectionStart <= 4
      ) {
        setSelection({ start: 3, end: 5 });
        const newMonth = cur_date.setMonth(cur_date.getMonth() + 1);
        setValue(
          new Date(newMonth)
            .toLocaleString()
            .replaceAll(".", "/")
            .replace(",", "")
        );
      }
      if (
        inputEl.current.selectionStart >= 7 &&
        inputEl.current.selectionStart <= 9
      ) {
        setSelection({ start: 6, end: 10 });
        const newYear = cur_date.setFullYear(cur_date.getFullYear() + 1);
        setValue(
          new Date(newYear)
            .toLocaleString()
            .replaceAll(".", "/")
            .replace(",", "")
        );
      }
    }
    if (e.ctrlKey && e.key === "ArrowDown") {
      e.preventDefault();
      if (
        inputEl.current.selectionStart >= 0 &&
        inputEl.current.selectionStart <= 1
      ) {
        setSelection({ start: 0, end: 2 });
        let newDate = cur_date.setDate(cur_date.getDate() - 1);
        setValue(
          new Date(newDate)
            .toLocaleString()
            .replaceAll(".", "/")
            .replace(",", "")
        );
      }
      if (
        inputEl.current.selectionStart >= 3 &&
        inputEl.current.selectionStart <= 4
      ) {
        setSelection({ start: 3, end: 5 });
        const newMonth = cur_date.setMonth(cur_date.getMonth() - 1);
        setValue(
          new Date(newMonth)
            .toLocaleString()
            .replaceAll(".", "/")
            .replace(",", "")
        );
      }
      if (
        inputEl.current.selectionStart >= 7 &&
        inputEl.current.selectionStart <= 9
      ) {
        setSelection({ start: 6, end: 10 });
        const newYear = cur_date.setFullYear(cur_date.getFullYear() - 1);
        setValue(
          new Date(newYear)
            .toLocaleString()
            .replaceAll(".", "/")
            .replace(",", "")
        );
      }
    }
  };

  const changeHandler = (e) => {
    setValue(e.target.value);
  };

  return (
    <div className={styles.main}>
      <h1> Frontend Task</h1>
      <p id="name">Abramov David</p>
      <input
        ref={inputEl}
        value={value}
        onChange={changeHandler}
        onKeyDown={keyHandler}
      />
    </div>
  );
};

export default DataInput;