I am making a coin toss application here, everything works well except this part where the coinTossResult() shows tails in resultText.innerHTML, whereas when I log it on to the console in the next line it shows head. Otherwise when coinTossResult() shows tails in resultText.innerHTML it matches with the console.log. No idea why its happening.

resultText.innerHTML = `The Computer chose ${compChoice} and it is a ${(coinTossResult())}`
console.log(compChoice, coinTossResult());

Here is my full code:

    const btnChoices = document.querySelectorAll('.options');
    const resultText = document.querySelector('.result-text');
    const tossWinText = document.querySelector('.toss-winner');
    const turnText = document.querySelector('.turn-text');
    const btnArea = document.querySelector('.buttons');
    let playerChoice =[];
    let compChoice = [];


    function whoseTurn(){
    if(Math.floor(Math.random() * 2) === 0){
        turnText.innerHTML = 'Computer will flip the coin';
        btnArea.style.display = "none";
        const options = ['head', 'tails'];
        const random = Math.floor(Math.random() * options.length);
        compChoice = options[random];
        resultText.innerHTML = `The Computer chose ${compChoice} and it is a ${(coinTossResult())}`
        console.log(compChoice, coinTossResult());
    }else{
        turnText.innerHTML = 'Player will flip the coin';
        btnChoices.forEach(function(e){
            e.addEventListener('click', function(){
                if(e.classList.contains('head')){
                   playerChoice = 'head';
                }else{
                    playerChoice = 'tails';
                }
                resultText.innerHTML = `The Player chose ${playerChoice} and it is a ${coinTossResult()}`
                if(playerChoice === coinTossResult()){
                    tossWinText.innerHTML = 'Player has won the Toss';
                }else{
                    tossWinText.innerHTML = 'Computer has won the Toss';
                }
            })
            
        })
        
        
    }
}
function coinTossResult(){
    const opt = ['head', 'tails'];
    const ran = Math.floor(Math.random() * opt.length);
    const cho = opt[ran];
    return cho;
}
whoseTurn();