Player score remains zero in rock, paper, scissors

I have this implementation of rock, paper, scissors, where I use buttons with images for the user to indicate their choice.

But the player score won’t go up — it remains 0, no matter what. The computer score works just fine. I only have trouble with getting the player score right. What am I doing wrong?

let result;
let playerScore = 0;
let computerScore = 0;
let playerSelection;
const buttonBox = document.querySelector(".selections");
const buttons = document.querySelectorAll('button');
const roundsBox = document.querySelector(".rounds");
const selection = ["ROCK", "PAPER", "SCISSORS"];
const pScore = document.querySelector("#playerScore");
const cScore = document.querySelector("#compScore");

buttons.forEach((button) => {
  button.addEventListener('click', () => {
    playerSelection = selection.data-selection;
    playRound(computerSelection());
    game();
  });
});

const computerSelection = function () {
  return selection[Math.floor(Math.random() * 3)];
};

function playRound(computerSelection) {
  const h1 = document.createElement("h1");
  const oneRound = document.createElement("div");
  oneRound.classList.add("oneRound");
  if (playerSelection == computerSelection) {
    h1.textContent = "DRAW";
  } else if (playerSelection == "ROCK" && computerSelection == "SCISSORS") {
    h1.textContent = "WIN";
    playerScore += 1;
  } else if (playerSelection == "PAPER" && computerSelection == "ROCK") {
    h1.textContent = "WIN";
    playerScore += 1;
  } else if (playerSelection == "SCISSORS" && computerSelection == "PAPER") {
    h1.textContent = "WIN";
    playerScore += 1;
  } else {
    h1.textContent = "LOSE";
    computerScore += 1;
  }
  
  pScore.textContent = playerScore;
  cScore.textContent = computerScore;
}

function game() {
  const finalResult = document.createElement("div");
  finalResult.classList.add("rounds");
  if (playerScore != 5 && computerScore != 5) {
    return
  } else if (playerScore == 5) {
    finalResult.textContent = "YOU WON! :D";
  } else if (computerScore == 5) {
    finalResult.textContent = "YOU LOST! :(";
  }
  roundsBox.prepend(finalResult);
  buttonBox.replaceWith(finalResult);
}
<div class='selections'>
    <button class='selection' data-selection='rock'> <img alt="rock" src='images/rock.png'> </button>
    <button class='selection' data-selection='paper'> <img alt="paper"  src='images/paper.png'> </button>
    <button class='selection' data-selection='scissors'> <img alt="scissors"  src='images/scissors.png'> </button>
</div>
<div class='results'>
    <div>
        <pre><h1>Player <span id="playerScore">0</span> - <span id="compScore">0</span> Computer</h1></pre>
        <div class="rounds">First to 5 wins!</div>
    </div>
</div>