Japanese Kana Keyboard on iOS doesn't work properly with capital English letters on input react js

Question

Faced with a really weird problem with the Japanese keyboard on iOS. I'm doing the application localization+customization for the Japenese locale and we also support mobiles.

If you add Japanese - Kana keyboard on iOS and then while inputting press ABC it will allow you to switch to English letters within the same keyboard, presenting in the look like the keyboard on old cell phones.

The problem that if I want the user to input only capital letters I do really simple onChange event handling on React, but in case I use specifically this keyboard at the input of the second letter it's going to duplicate the previous ones.

React code (app generated using create-react-app):

import React, { useState } from 'react';

const TextInput = ({handleChange, value}) => {
  return (
    <input onChange={handleChange} value={value}/>
  )
};

const TextField = () => {

  const [value, setValue] = useState();

  const handleChange = (event) => {
    
    const value = event.target.value;
    const upperCaseString = value.toUpperCase();
    debugger;
    setValue(upperCaseString);
  }

  return (<TextInput handleChange={handleChange} value={value}/>)
}

function App() {
  return (
    <div className="App">
      <TextField/>
    </div>
  );
}

export default App;

1st input:

event.target.value === 'a'

2nd input:

event.target.value === 'Aad';

Here is the error! I only pressed d it should be Ad instead.

I think it's the keyboard specific behavior that it's ignores the capital letters that are already present and if I debug it I'll that on each onChange there still will be the regular small letters.

I want eventually to have the regular string without duplicates all letters uppercase.

Guys do you have any ideas about what the hell is going on and how to fix it?