Why doesn't my score update the first time? (rock, paper scissors)

Question

const div=document.querySelector('div');
const buttons=document.querySelector('.buttons')
let score=[0,0]


buttons.addEventListener('click', (e)=> {
  if (e.target.tagName==="BUTTON") {
    let playerRes=e.target.innerHTML
    let compRes=rockPaper()
    let number=compareValues(playerRes, compRes)
    console.log(number)
    if (number===0) {
      div.innerHTML=`
      <p>Player[${score[0]}] Computer[${score[1]}]</p>
      <p>${playerRes} vs ${compRes}</p>
      <p>It's a tie!</p>
      `
    } else if (number>0) {
      div.innerHTML=`
      <p>Player[${score[0]++}] Computer[${score[1]}]</p>
      <p>${playerRes} vs ${compRes}</p>
      <p>Player wins!</p>
      `
    } else if (number<0) {
      div.innerHTML=`
      <p>Player[${score[0]}] Computer[${score[1]++}]</p>
      <p>${playerRes} vs ${compRes}</p>
      <p>Computer wins!</p>
      `
    }
  }
  
});


const rockPaper=()=> {
  const items=["Rock", "Paper", "Scissors"]
  let item = items[Math.floor(Math.random()*items.length)];
  return item
}

const compareValues=(player,comp)=> {
  if (player==="Rock" && comp==="Scissors" || player==="Scissors" && comp==="Paper"|| player==="Paper" && comp==="Rock" ) {
    return 1
  } else if (player===comp) {
    return 0
  } else {
    return -1
  }
}

<div></div>
<div class="buttons">
  <button>Rock</button>
  <button>Paper</button>
  <button>Scissors</button>
</div>

Here is my JS code:

const div=document.querySelector('div');
const buttons=document.querySelector('.buttons')
let score=[0,0]


buttons.addEventListener('click', (e)=> {
  if (e.target.tagName==="BUTTON") {
    let playerRes=e.target.innerHTML
    let compRes=rockPaper()
    let number=compareValues(playerRes, compRes)
    console.log(number)
    if (number===0) {
      div.innerHTML=`
      <p>Player[${score[0]}] Computer[${score[1]}]</p>
      <p>${playerRes} vs ${compRes}</p>
      <p>It's a tie!</p>
      `
    } else if (number>0) {
      div.innerHTML=`
      <p>Player[${score[0]++}] Computer[${score[1]}]</p>
      <p>${playerRes} vs ${compRes}</p>
      <p>Player wins!</p>
      `
    } else if (number<0) {
      div.innerHTML=`
      <p>Player[${score[0]}] Computer[${score[1]++}]</p>
      <p>${playerRes} vs ${compRes}</p>
      <p>Computer wins!</p>
      `
    }
  }

});


const rockPaper=()=> {
  const items=["Rock", "Paper", "Scissors"]
  let item = items[Math.floor(Math.random()*items.length)];
  return item
}

const compareValues=(player,comp)=> {
  if (player==="Rock" && comp==="Scissors" || player==="Scissors" && comp==="Paper"|| player==="Paper" && comp==="Rock" ) {
    return 1
  } else if (player===comp) {
    return 0
  } else {
    return -1
  }
}

Here is a link to my JS fiddle: https://jsfiddle.net/apasric4/b1Lgr5xu/

The score for both players only updates properly after the first time one of the three buttons is clicked? Why is this happening? Even when its a win for either the player or computer on the first time, both scores remain at 0. The conditionals, as well as the compareValues function seem to be right. I can't figure out what's wrong.