Can't figure out why React code doesn't work

Question

I've built a custom Input component which is simply a wrapper for the HTML input element. Here's the critical code, which I've simplified for posting here:

// @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} />;
});

I wrote a bunch of React Testing Library tests for this and they all pass fine. But when I implemented this component in a web page, the initial value failed to appear. I solved the problem by dropping the currentValue code and just using props.value instead. That solves it. But I'm most curious why this approach above fails to display the initial value.

Answer 1

Look at this code , I did use prop-types