输入值清除-React Hooks

我正在尝试使用useRef单击按钮后清除输入内容，这是我的代码

单击按钮后，我清除了状态和输入值

    const [giftCode, setGiftCode] = useState('');
    const inputGift = useRef(null);
    const clickHandler = () =>{
       setGiftCode('');  
       inputGift.current.value = '';
     }

                        <TextInput
                            type="text"
                            field="gift-card-code"
                            ref={inputGift}
                            autoComplete="off"
                            onChange={event => {
                                setGiftCodeError(false);
                                setGiftBalanceCheck(null);
                                setGiftCode.bind(event.target.value);
                            }}
                        />

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.