JSX: Under function task2() is not printing (task is to print box randomly at 4 position namely - top,bottom,right,left along with match to arrow hit)

import React,{Component} from ‘react’;

import ‘…/App.css’;

function task2(x){
let divStyle = {};
console.log(“x=”,x)
x===0?divStyle = {
position:‘relative’,
left: ‘43%’,
top: ‘5%’,
display: ‘block’ ,
backgroundColor: ‘rgb(202, 32, 72)’,
opacity: ‘0.2’,
width: ‘150px’,
height: ‘150px’,
}:x===1?divStyle = {
position:‘relative’,
left:‘43%’,
top: ‘75%’,
display: ‘block’,
backgroundColor: ‘rgb(202, 32, 72)’,
opacity: ‘0.2’,
width: ‘150px’,
height: ‘150px’,
}:x===2?divStyle = {
position:‘relative’,
left:‘5%’,
top: ‘43%’,
display: ‘block’,
backgroundColor: ‘rgb(202, 32, 72)’,
opacity: ‘0.2’,
width: ‘150px’,
height: ‘150px’,
}:divStyle = {
position:‘relative’,
left:‘75%’,
top: ‘43%’,
display: ‘block’,
backgroundColor: ‘rgb(202, 32, 72)’,
opacity: ‘0.2’,
width: ‘150px’,
height: ‘150px’,
};
console.log(divStyle);
return (

test shiftingVergence
);
}

function task(){
var x = Math.floor(Math.random()*16)%4;

switch(x){

    case 0:
        console.log("0");
        task2(x);
        document.onkeydown = function(event) {
            if(event.keyCode===38)
            {
                console.log("correct key")
                const audioEl = document.getElementsByClassName("audio-element1")[0]
                audioEl.play()
                task();    
            }
            else
            {
                console.log("wrong key");
                const audioEl = document.getElementsByClassName("audio-element2")[0]
                audioEl.play()
                task();
            }    
        }
        break;
    case 1:
        console.log("1");
        task2(x);
        document.onkeydown = function(event) {
        if(event.keyCode===40)
        {
            console.log("correct key")
            const audioEl = document.getElementsByClassName("audio-element1")[0]
            audioEl.play()
            task();    
        }
        else
        {
            console.log("wrong key");
            const audioEl = document.getElementsByClassName("audio-element2")[0]
            audioEl.play()
            task();
        }   
    }
    break;
    case 2:
        console.log("2");
        task2(x);
        document.onkeydown = function(event) {
            if(event.keyCode===37)
            {
                console.log("correct key")
                const audioEl = document.getElementsByClassName("audio-element1")[0]
                audioEl.play()
                task();    
            }
            else
            {
                console.log("wrong key");
                const audioEl = document.getElementsByClassName("audio-element2")[0]
                audioEl.play()
                task();
            }    
        }
        break;
    case 3:
        task2(x);
        console.log("3");
        document.onkeydown = function(event) {
            if(event.keyCode===39)
            {
                console.log("correct key")
                const audioEl = document.getElementsByClassName("audio-element1")[0]
                audioEl.play()
                task();    
            }
            else
            {
                console.log("wrong key");
                const audioEl = document.getElementsByClassName("audio-element2")[0]
                audioEl.play()
                task();
            }   
        }
        break;
    default:
        console.log("failure");
}

}

class ShiftingVergence extends Component{

render(){
    return(
        <div>
        <div className="software-background1 m-5">
            <div className="shiftingVergence-background">
            {
                 task()              
                }
            </div>
        </div>
                <audio className="audio-element1">
                  <source src="../assets/sounds/beepcorrect.mp3"></source>
                  <source src="../assets/sounds/beepcorrect.ogg"></source>
                </audio>
                <audio className="audio-element2">
                  <source src="../assets/sounds/beepincorrect.mp3"></source>
                  <source src="../assets/sounds/beepincorrect.ogg"></source>
                </audio>

        </div>
    );
}

}

export default ShiftingVergence;