Не могу понять, почему код React не работает

Question

Я создал собственный компонент Input, который является просто оболочкой для элемента HTML input. Вот критический код, который я упростил для публикации здесь:

// @flow

import React, { useState } from 'react';

type Props = {
  value?: string,
  onChange: Function
};

const Input = ((props: Props) => {
  const [ currentValue, setCurrentValue ] = useState(!!props.value ? props.value : '');

  const handleChange = (event: SyntheticInputEvent<EventTarget>) => {
    setCurrentValue(event.target.value);
    props.onChange(event);
  };

  return <input type='text'
                value={currentValue}
                onChange={handleChange} />;
});

Я написал для этого кучу тестов React Testing Library, и все они проходят нормально. Но когда я реализовал этот компонент на веб-странице, начальное значение не появилось. Я решил проблему, отбросив код currentValue и просто используя вместо него props.value. Это решает проблему. Но мне очень любопытно, почему этот подход выше не отображает начальное значение.

Answer 1

Посмотрите на этот код , я использовал prop-types