Rock Paper scissors game using vanilla javascript- scissors option not working [closed]

I have been making a rock-paper-scissors game using vanilla JS everything else is working fine, when I click other options the game result is changing but when I click on the scissors option/icon it’s not working the game result is not changing the innerHTML is not changing only when I click on scissors although the choice scissor followed by the computer’s random choice is visible on the console when I click on it.
This is my first project with JS and I am really confused

// ---computer's choice---
const genCompChoice = () => {
  let options = ["rock", "paper", "scissors"]
  let idx = Math.floor(Math.random() * 3)
  return options[idx]
}

let textBubble = document.querySelector("#message")
let userScore = document.querySelector(".user-score")
let incrementUser = 0
let compScore = document.querySelector(".computer-score")
let incrementComp = 0

// ---game logic---
const playGame = (usersChoice) => {
  console.log("users choice = ", usersChoice)
  const computersChoice = genCompChoice()
  console.log("computer's choice = ", computersChoice)
  let textBubble = document.querySelector("#message")

  function changingText() {
    if (usersChoice === computersChoice) {
      let change = textBubble.innerHTML = "It's a Tie!"
      textBubble.style.backgroundColor = "black"
    } else if (usersChoice == "rock") {
      if (computersChoice == "scissors") {
        textBubble.innerHTML = "You Won!"
        userScore.innerHTML = ++incrementUser
        textBubble.style.backgroundColor = "#3976d6"
      } else {
        textBubble.innerHTML = "Computer Won!"
        textBubble.style.backgroundColor = "#d00d14"
        compScore.innerHTML = ++incrementComp
      }
    } else if (usersChoice == "paper") {
      if (computersChoice == "rock") {
        textBubble.innerHTML = "You Won!"
        textBubble.style.backgroundColor = "#3976d6"
        userScore.innerHTML = ++incrementUser
      } else {
        textBubble.innerHTML = "Computer Won!"
        textBubble.style.backgroundColor = "#d00d14"
        compScore.innerHTML = ++incrementComp
      }
    } else if (usersChoice == "scissors") {
      if (computersChoice == "paper") {
        textBubble.innerHTML = "You Won!"
        textBubble.style.backgroundColor = "#3976d6"
        userScore.innerHTML = ++incrementUser
      } else {
        textBubble.innerHTML = "Computer Won!"
        textBubble.style.backgroundColor = "#d00d14"
        compScore.innerHTML = ++incrementComp
      }
    }

  }
  changingText()

}
// ---clickable, user's choice---
let choices = document.querySelectorAll(".options-images")
choices.forEach(
  (choice => {
    choice.addEventListener("click", () => {
      const usersChoice = choice.getAttribute("id")
      playGame(usersChoice)
    })
  })
)

<h1>Rock Paper Scissor</h1>
<div class="options">
  <div class="options-images" id="rock">
    <img src="images/rock.png" alt="rock">
  </div>
  <div class="options-images" id="paper">
    <img src="images/paper.png" alt="paper">
  </div>
  <div class="options-images" id="Scissors">
    <img src="images/scissors.png" alt="scissors">
  </div>

</div>
<div class="score-board">
  <div class="Score">
    <p class="user-score">0</p>
    <p>You</p>
  </div>
  <div class="Score">
    <p class="computer-score">0</p>
    <p>Computer</p>
  </div>
</div>
<div class="msg-box">
  <div class="msg">
    <p id="message">YOU WON!</p>
  </div>
</div>