Im building rock/paper/scissors where user plays against computer. I want to update the score after each round and display it inside a div. The code works after the 1st score, but never increments after 1.

let computerPlay = () => {
  let compChoices = ["rock", "paper", "scissors"]; //array storing computer possible actions
  let i = Math.floor(Math.random() * 3);
  let choice = compChoices[i];

  return choice;
};

//select buttons for player choice
let buttons = document.querySelectorAll(".btn");

//select elements for updating scoreboard
let homeScore = document.querySelector(".home-score");
let awayScore = document.querySelector(".away-score");
let display = document.querySelector(".score-board-display");

//declare player and computer score variables
let playerScore, compScore;

//compare player and computer selections update score of winner
let playRound = (playerSelection, computerSelection) => {
  let result = ``;
  playerScore = 0;
  compScore = 0;
  if (playerSelection === computerSelection) {
    result = `Tie ${playerSelection} equals ${computerSelection}`;
  } else if (
    (playerSelection == "rock" && computerSelection == "scissors") ||
    (playerSelection == "paper" && computerSelection == "rock") ||
    (playerSelection == "scissors" && computerSelection == "paper")
  ) {
    result = `LFG!! ${playerSelection} beats ${computerSelection}`;
    playerScore += 1;
    homeScore.innerText = playerScore.toLocaleString();
  } else {
    result = `You Lose! ${computerSelection} beats ${playerSelection}`;
  }

  return (display.innerHTML = result);
};

buttons.forEach((button) => {
  button.addEventListener("click", () => {
    let computerSelection = computerPlay();
    let playerSelection = button.innerHTML.toLowerCase();
    playRound(playerSelection, computerSelection);
  });
});