title: React-parent component is taking input children's value 1 character missing
body: <p>I created an Input component like this:</p>
  
  <pre><code>  import React, { useState } from 'react'
    const Input = ({ name, placeholder, type, className, inputRef, defaultValue, preventDefaultBehavior, style, timeout = 2000,
          onChange, onDoubleClick, onFocus, onBlur }) =&gt; {        
          const [value, setValue] = useState(defaultValue);
          const [typingTimeout, setTypingTimeout] = useState(0);        
          function handleChange(e) {
              if (typingTimeout)
                  clearTimeout(typingTimeout);
              setValue(e.target.value);
              if (onChange) {
                  setTypingTimeout(
                      setTimeout(function () {
                          onChange({ target: { name, value } });
                      }, timeout)
                  );
              }
          };
          function handleKeyPress(e) {
              if (e.keyCode !== 13 || timeout &lt;= 1000)
                  return;
              if (typingTimeout)
                  clearTimeout(typingTimeout);        
              onChange({ target: { name, value } });
          }
          return (
              &lt;input
                  name={name}
                  className={className}
                  type={type}
                  ref={inputRef}
                  placeholder={placeholder}
                  style={style}
                  value={value}
                  onKeyPress={handleKeyPress}
                  onChange={handleChange}
                  onDoubleClick={onDoubleClick}
                  onMouseDown={preventDefaultBehavior}
                  onBlur={onBlur}
                  onFocus={onFocus}
              /&gt;
          );
      };
      export default Input;
  </code></pre>
  
  <p>I'm using that Input component on the parent like this:</p>
  
  <pre><code>const [url, setUrl] = useState('');
  &lt;Input onChange={e =&gt; setUrl(e.target.value)} name="url" 
    placeholder="URL" type="text" defaultValue={url} /&gt;
  </code></pre>
  
  <p>However, parent component is not taking the last character of the input, such as:</p>
  
  <p>input: 'abc'</p>
  
  <p>parent state: 'ab'</p>
  
  <blockquote>
    <p>I tried <code>useEffect</code> and <code>async/await</code> but it didn't work for me.</p>
  </blockquote>