Input cleared when 'done' button on iOS virtual keyboard touched

Question

My React App has an issue about input and iOS virtual keyboard.

This is Default

after I got SMS pass code, the code appears on top of keyboard automatically.

1. when I touch outside the keyboard to hide it, the code remains. remain code img

2. but when I touch 'done' button on right side of keyboard, the code is gone and input cleared. -> problem!

cleared input img

How can I fix this ? I think that I can't controll the virtual keyboard and 'done' button directly by using JS. It works well at Android, but especially not working at iOS.

Here is my testing environment :

• iOS v16.1.1
• device : iPhone SE2
• using Chrome

Help me please :( I want to keep the value of input when I touch 'done' button(case 2) like when I touch outside the keyboard(case 1).

Here is my code.

...

const [verifyNum, setVerifyNum] = useState('');

<input
            placeholder="인증번호 6자리"
            value={verifyNum} 
            onChange={(e) => setVerifyNum(e.target.value)}
            type="text"
            maxLength={6}
            inputMode="numeric"
          >

I tried autocomplete="one-time-code" but it's not worked.