Обработчик события для onKeyDown не работает должным образом, когда используется оператор распространения

Question

Я пытаюсь сбросить значение <input> с помощью управляющей клавиши.Я использую оператор распространения для изменения параметра объекта события, который я отправляю.

Почему это может не работать, а второй фрагмент работает?

handleKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
    const {onChange, onKeyDown} = this.props;

    if (event.key === KEYBOARD_EVENT_KEY.ESCAPE) {
      onChange({
        ...event,
        currentTarget: {
          ...event.currentTarget,
          value: ""
        }
      });
    }

    if (onKeyDown) {
      onKeyDown(event);
    }
  };

Второй фрагмент:

handleKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {
    const {onChange, onKeyDown} = this.props;

    if (event.key === KEYBOARD_EVENT_KEY.ESCAPE) {
      const newEvent = {...event};
      newEvent.currentTarget.value = "";

      onChange(newEvent);
    }

    if (onKeyDown) {
      onKeyDown(event);
    }
  };

Редактировать: это функция для реквизита onChange, исходящего из родительского компонента.Добавлен consolelog.

handleOnChange: React.ReactEventHandler<HTMLInputElement> = event => {
  const { value, name } = event.currentTarget;

  console.log(event.currentTarget);

  this.setState(prevState => ({
    ...prevState,
    [name]: value
  }));
};

console:

value: ""
__reactEventHandlers$psprxavxig:
    autoComplete: "off"
    autoCorrect: "off"
    className: "asd-input"
    disabled: undefined
    id: "asd-zxc-form-length-input"
    max: undefined
    min: 0
    name: "length"
    onBlur: undefined
    onChange: ƒ handleChange(event)
    onFocus: undefined
    onKeyDown: ƒ (event)
    onKeyUp: undefined
    placeholder: "Length"
    step: undefined
    type: "number"
    value: "1231"
    __proto__: Object
__reactInternalInstance$psprxavxig: FiberNode
    actualDuration: 0.0549999822396785
    actualStartTime: 353616.4250000147
    alternate: FiberNode {tag: 5, key: null, elementType: "input", type: "input", stateNode: input#asd-zxc-form-length-input.asd-input, …}
    child: null
    childExpirationTime: 0
    contextDependencies: null
    effectTag: 4
    elementType: "input"
    expirationTime: 0
    firstEffect: null
    index: 0
    key: null
    lastEffect: null
    memoizedProps: {className: "asd-input", id: "asd-zxc-form-length-input", name: "length", type: "number", step: undefined, …}
    memoizedState: null
    mode: 4
    nextEffect: FiberNode {tag: 1, key: null, elementType: ƒ, type: ƒ, stateNode: asdInput, …}
    pendingProps: {className: "asd-input", id: "asd-zxc-form-length-input", name: "length", type: "number", step: undefined, …}
    ref: null
    return: FiberNode {tag: 5, key: null, elementType: "div", type: "div", stateNode: div.asd-input-wrapper, …}
    selfBaseDuration: 0.004999979864805937
    sibling: null
    stateNode: input#asd-zxc-form-length-input.asd-input
    tag: 5
    treeBaseDuration: 0.004999979864805937
    type: "input"
    updateQueue: null
    _debugHookTypes: null
    _debugID: 242
    _debugIsCurrentlyTiming: false
    _debugOwner: FiberNode {tag: 1, key: null, elementType: ƒ, type: ƒ, stateNode: asdInput, …}
    _debugSource: null
    __proto__: Object
_valueTracker:
    getValue: ƒ ()
    setValue: ƒ (value)
    stopTracking: ƒ ()
    __proto__: Object
_wrapperState:
    controlled: true
    initialChecked: undefined
    initialValue: ""
    __proto__: Object
__proto__: Object