title: Input value clear - React Hooks
body: <p>I am trying to clear the input after the button click using useRef below is my code</p>
  
  <blockquote>
    <p>After button click I cleared the state and the input value</p>
  </blockquote>
  
  <pre><code>    const [giftCode, setGiftCode] = useState('');
      const inputGift = useRef(null);
      const clickHandler = () =&gt;{
         setGiftCode('');  
         inputGift.current.value = '';
       }
  
                          &lt;TextInput
                              type="text"
                              field="gift-card-code"
                              ref={inputGift}
                              autoComplete="off"
                              onChange={event =&gt; {
                                  setGiftCodeError(false);
                                  setGiftBalanceCheck(null);
                                  setGiftCode.bind(event.target.value);
                              }}
                          /&gt;
  </code></pre>
  
  <p>The input value is clearing, but the state showing the browser debugger is not changing, if we changed the input filed then the state is changing, useState setGiftcode is not changing the component actual state is there any alternate way to do this. see the below image for the understanding.
  <a href="https://i.stack.imgur.com/PpiMs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PpiMs.png" alt="enter image description here"></a></p>