reactのinputタグでひらがな→カタカナに自動変換ができない

reactでinputタグにひらがなを入力するときカタカナに自動変換したいですが、

ひらがな→ひらがな（自動変換しない場合）
PC版、不具合なし
スマホ版、不具合なし

ひらがな→カタカナ（自動変換する場合）
PC版、不具合なし
スマホ版、不具合あり

スマホで入力すると正しく自動変換ができません。
これを解決する方法がわかりません、、

※下記のパスで動作確認やソースコード確認ができます。
https://codepen.io/kcjfgnl9205/pen/jOQwrNr