Korean characters reappear in text <input> after input value cleared and new KR characters typed

I am creating a project in which the user types Korean characters that are shown to them.

The first time a Korean character is typed, everything works as intended (fig. 1). But once the input field has been cleared at least once and another Korean character is typed into it, the previously entered character is unwantedly entered right before the newly typed character (fig. 2).

fig. 1 log after a Korean character (ㅐ) is typed after the page loads

fig. 2 log after a Korean character (ㅏ) is entered later

In this example, "ㅐ" is displayed in the question field when the page loads. I enter ㅐ on my keyboard and fig. 1 is displayed in the console (and "ㅐ" is shown in the answer field). After the input field is cleared, the question field displays "ㅏ". I enter ㅏ on my keyboard and fig. 2 is displayed in the console and the answer field displays "ㅐㅏ".

This problem does not occur if Latin characters are typed or if Korean characters are pasted into the input. As far as I can tell the problem only arises if Korean characters are physically typed. I have found that by hitting backspace before typing a Korean character, the previous character is effectively deleted and doesn't get retyped before the newly typed Korean character.

I am using Windows 10 Home and Microsoft IME on Google Chrome & Microsoft Edge.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const questionField = document.querySelector(".questionField");
const inputField = document.querySelector(".inputField");
let currentIndex;
let currentCorrectAnswer;
const characters = [
    "ㅏ",
    "ㅑ",
    "ㅐ"
]

inputField.focus();
generateQuestion();

inputField.addEventListener("input", function(e){
    if(inputField.value == currentCorrectAnswer){
        correct(e);
    } else if(inputField.value != ""){
        incorrect(e);
    }
})

function correct(e){
    console.log(inputField.value + " input & is correct." + " is composing: " + e.isComposing);
    questionField.innerHTML = "Correct"
    setTimeout(nextQuestion, 500);
}

function incorrect(e){
    console.log(inputField.value + " input & is incorrect, " + currentCorrectAnswer + " was the answer." + " is composing: " + e.isComposing);
    questionField.innerHTML = "Incorrect"
    setTimeout(nextQuestion, 500);
}

function nextQuestion(){
    generateQuestion();
    inputField.value = "";
}

function generateQuestion(){
    currentIndex = Math.floor(Math.random() * characters.length);
    questionField.innerHTML = characters[currentIndex];
    currentCorrectAnswer = characters[currentIndex];
}

<!-- language: lang-html -->

<h1 class="questionField">Key</h1>
<label for="inputField">Enter this key on your keyboard</label><br>
<input type="text" id="inputField" class="inputField" placeholder="Answer here">

<!-- end snippet -->

Blurring and re-focusing on the answer field once an answer is checked fixes the issue.

This can be done by editing the nextQuestion function like so:

function nextQuestion(){
    generateQuestion();
    inputField.blur();
    inputField.focus();
    inputField.value = "";
}