changing state before next keydown in react - reactjs

Question

I am creating a game that when your health goes below 0, on a keydown it prints in a div:
"Game_over_:(_click_to_continue" letter by letter. I was getting a bug where the letters would print out multiple times like ggggaaammmeee ooovvveerr.
I set up a conditional statement where if the state gameOver is 0 and after a keydown event, then it activates the setInterval, else it does not. That solved the problem to some extent, however, the state sometimes changes a second late, and after setting up console.log(this.state.gameOver), it sometimes prints 0 twice before this.state.gameOver actually changes to 1. Other times it works just fine.
if (this.state.gameOver===0){
console.log(this.state.gameOver)
var s1="Game_Over\n:(\nClick_to_continue..."
var v1 =0
var b = document.getElementById("redButton")
var arr1 = setInterval(function(){
if(v1===0){b.innerText=""};b.innerText= b.innerText+s1[v1];v1+=1;
if(v1==s1.length){clearInterval(arr1)}}, 100)
this.setState({gameOver:1})
}
It's still sometimes printing Ggaammee Ovveerr.

Answer 1

So all I had to do was set up a conditional statement that depends on whether a variable is true or false. Once the setInterval function is triggered, the variable changes to false so that more keydowns wont cause multiple calls to setInterval.
var check;
if (check!==false){
check=false;
var arr1 = setInterval(function(){
if(v1===0){b.innerText=""};
b.innerText= b.innerText+s1[v1];v1+=1;
if(v1==s1.length){clearInterval(arr1)}}, 100)}
Once I click the screen with the mouse:
check=true;