reactjs - 入力値クリア - React Hooks

Question

以下の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);
                            }}
                        />

入力値はクリアされていますが、ブラウザー デバッガーを示す状態は変化していません。入力フィールドを変更した場合、状態は変化しています。useState setGiftcode はコンポーネントの実際の状態を変化させていません。これを行う別の方法はありますか。理解のために下の画像を参照してください。