title: React Input element onChange event not triggered
body: <p>I've used React create a time input component like this：</p>
  <p><img src="https://l.ruby-china.com/photo/u1435638317/6a2ee8cd-fde9-4986-824b-042ffd087d28.png!large" alt="img" /></p>
  <pre class="lang-js prettyprint-override"><code>import { useEffect, useState } from &quot;react&quot;;
  
  function padLeadingZeros(num, size) {
    var s = num + &quot;&quot;;
    while (s.length &lt; size) s = &quot;0&quot; + s;
    return s;
  }
  
  function TimeInput({ hour, minute, onChange }) {
    const [time, setTime] = useState(&quot;&quot;);
    const [valuep, setValuep] = useState(0);
  
    const setFormatTime = (hour, minute) =&gt; {
      setTime(padLeadingZeros(hour, 2) + &quot;:&quot; + padLeadingZeros(minute, 2));
    }
  
    const handleAdd = () =&gt; {
      let [hour_str, minute_str] = time.split(&quot;:&quot;);
      let hour_i = parseInt(hour_str);
      let minute_i = parseInt(minute_str);
      if (valuep &lt; 3) {
        hour_i = hour_i + 1;
        if (hour_i &gt; 23) {
          hour_i = 0;
        }
      } else {
        minute_i = minute_i + 1;
        if (minute_i &gt; 59) {
          minute_i = 0;
        }
      }
      setFormatTime(hour_i, minute_i);
    };
  
    const handleMin = () =&gt; {
      let [hour_str, minute_str] = time.split(&quot;:&quot;);
      let hour_i = parseInt(hour_str);
      let minute_i = parseInt(minute_str);
      if (valuep &lt; 3) {
        hour_i = hour_i - 1;
        if (hour_i &lt; 0) {
          hour_i = 23;
        }
      } else {
        minute_i = minute_i - 1;
        if (minute_i &lt; 0) {
          minute_i = 59;
        }
      }
      setFormatTime(hour_i, minute_i);
    };
  
    const markCurrentPosition = (e) =&gt; {
      setValuep(e.target.selectionStart);
    }
  
    useEffect(() =&gt; {
      setFormatTime(hour, minute);
    }, [hour, minute]);
  
    return &lt;&gt;
      &lt;input type=&quot;text&quot; value={time} onChange={onChange} onClick={markCurrentPosition} onKeyUp={markCurrentPosition} /&gt;
      &lt;div className=&quot;flex flex-col&quot;&gt;
        &lt;div className=&quot;hover:bg-gray-200&quot; onClick={handleAdd}&gt;
          &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; className=&quot;h-6 w-6 cursor-pointer&quot; fill=&quot;none&quot; viewBox=&quot;0 0 24 24&quot; stroke=&quot;currentColor&quot; strokeWidth={2}&gt;
            &lt;path strokeLinecap=&quot;round&quot; strokeLinejoin=&quot;round&quot; d=&quot;M5 15l7-7 7 7&quot; /&gt;
          &lt;/svg&gt;
        &lt;/div&gt;
        &lt;div className=&quot;hover:bg-gray-200&quot; onClick={handleMin}&gt;
          &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; className=&quot;h-6 w-6 cursor-pointer&quot; fill=&quot;none&quot; viewBox=&quot;0 0 24 24&quot; stroke=&quot;currentColor&quot; strokeWidth={2}&gt;
            &lt;path strokeLinecap=&quot;round&quot; strokeLinejoin=&quot;round&quot; d=&quot;M19 9l-7 7-7-7&quot; /&gt;
          &lt;/svg&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/&gt;
  
  }
  
  export { TimeInput }
  </code></pre>
  <p>And used it in a parent component:</p>
  <pre class="lang-js prettyprint-override"><code>import { TimeInput } from &quot;../components/TimeInput&quot;;
  
  const Parent = () =&gt; {
    const [hour, setHour] = useState(0);
    const [minute, setMinute] = useState(0);
    const handleTimeInputChange = (e) =&gt; {
      console.log(&quot;handleTimeInputChange&quot;, e.target.value);
    };
  
   return &lt;&gt;
     &lt;TimeInput hour={hour} minute={minute} onChange={handleTimeInputChange} /&gt;
  &lt;/&gt;
  }
  </code></pre>
  <p>The time input arrow handle work and input display as expected. But onChange handle <code>handleTimeInputChange </code> was not invoked as expected. I want child componet time input pass data back to parent.</p>
  <p>See demo here: <a href="https://codesandbox.io/s/bc15y3" rel="nofollow noreferrer">https://codesandbox.io/s/bc15y3</a></p>
  <p>What is a right react way to create a reusable packaged component?</p>