How do I change grid for a memory game using dropdown list, I've manage to make it work but the cards stops flipping when I change the grid?

When I first load page the game works but when I change grid the game cards don't flip. I'm not sure if it the use of onchange inside the select tag or it something else. If I change the value of a variable named value inside displayCardsDiv manual it also works fine maybe if I could find a way to update it by dropddown list or button click it will work.

Html

    <div class="game-container" >
      <script>displayCardsDiv();</script>
      <div ></div>
    </div> 
  </div> 
  <div class="game-title">
    <label class="changeGrid">change Grid</label>
    <select  id="grid" name="grid" onchange="displayCardsDiv()">
         <option value="first" id="first">2x2</option>
         <option value="second" id="second">3x2</option>
         <option value="third" id="third">4x3</option>
     </select>
 <button class="reset-btn" onclick="resetGame()">Reset</button>
 </div>
    <script src="./src/script.js"></script>
</body>

Javascript

  "src/img/apple-eye.png",
  "src/img/apple-eye.png",
  "src/img/blue-nife.png",
  "src/img/blue-nife.png",
  "src/img/devil.png",
  "src/img/devil.png",
  "src/img/headless.png",
  "src/img/headless.png",
  "src/img/heart.png",
  "src/img/heart.png",
  "src/img/mommy.png",
  "src/img/mommy.png",
];

class MemoryGame {
  constructor() {
    this.cardsArray = playCard;
  }

  beforeGameStart() {
    this.cardChecker = null;
    this.matchingCardsArray = [];
    this.isLocked = true;
    setTimeout(() => {
      this.shuffleCards(this.cardsArray);
      this.isLocked = false;
    }, 500);
  }

  handleCardFlip(card) {
    if (this.flipCard(card)) {
      card.classList.add("showingCard");

      if (this.cardChecker) {
        this.checkForMatch(card);
      } else {
        this.cardChecker = card;
      }
    }
  }

  checkForMatch(card) {
    if (this.findTypeOfCard(card) === this.findTypeOfCard(this.cardChecker))
      this.matchCards(card, this.cardChecker);
    else this.misMatchCards(card, this.cardChecker);

    this.cardChecker = null;
  }

  matchCards(firstCard, secondCard) {
    this.matchingCardsArray.push(firstCard);
    this.matchingCardsArray.push(secondCard);
    firstCard.classList.add("matched");
    secondCard.classList.add("matched");
    setTimeout(() => {
      if (this.matchingCardsArray.length === this.cardsArray.length) {
        alert("All cards matched");
        resetGame();
      }
    }, 1000);
  }

  misMatchCards(firstCard, secondCard) {
    this.isLocked = true;
    setTimeout(() => {
      firstCard.classList.remove("showingCard");
      secondCard.classList.remove("showingCard");
      this.isLocked = false;
    }, 1000);
  }

  shuffleCards(cardsArray) {
    cardsArray.forEach((card) => {
      let randomPos = Math.floor(Math.random() * cardsArray.length);
      card.style.order = randomPos;
    });
  }

  findTypeOfCard(card) {
    return card.getElementsByClassName("value")[0].src;
  }

  flipCard(card) {
    return (
      !this.isLocked &&
      !this.matchingCardsArray.includes(card) &&
      card !== this.cardChecker
    );
  }
}

function resetGame() {
  location.reload();
}
let gameContainer = document.querySelector(".game-container");

function twoByTwoGrid() {
  gameContainer.style.gridTemplateColumns = "repeat(2, auto)";
  return imagesArray.slice(0, 4);
}

function threeByTwoGrid() {
  gameContainer.style.gridTemplateColumns = "repeat(3, auto)";
  return imagesArray.slice(0, 6);
}

function displayCardsDiv() {
  let deckOfCards = [];
  let displayGameCards = "";
  let value = document.querySelector("#grid").value;
  if (value == "first") {
    deckOfCards = twoByTwoGrid();
  }
  if (value === "second") {
    deckOfCards = threeByTwoGrid();
  }
  if (value !== "first" && value !== "second") {
    gameContainer.style.gridTemplateColumns = "repeat(4, auto)";
    deckOfCards = [...imagesArray];
  }

  for (let i in deckOfCards) {
    displayGameCards += `<div class="card">
            <div class="card-back card-face"><img class="demonsCards" src="src/img/demons.png"></div>
            <div class="card-front card-face"><img class="value" src="${deckOfCards[i]}"></div>
            </div>`;
  }
  document.getElementsByClassName("game-container")[0].innerHTML =
    displayGameCards;
}
displayCardsDiv();
const playCard = document.querySelectorAll(".card");
const game = new MemoryGame(playCard);
game.beforeGameStart();

for (let i = 0; i < imagesArray.length; i++) {
  playCard[i].addEventListener("click", () => game.handleCardFlip(playCard[i]));
}
module.exports = { game };

CSS

  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  min-height: 100vh;
}

body {
  margin: 0;
  background: radial-gradient(#46bddb, #4672db);
}

h1{
  background: -webkit-repeating-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
img {
  height: 175px;
  width: 125px;
}

.game-title {
  color: aliceblue;
  font-family: 'Noto Sans Mono', monospace;
  font-weight: normal;
  text-align: center;
  font-size: 4em;
  margin-top: 0px;
}

.game-info-container {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
}

.game-info {
  font-family: 'Pacifico', cursive;
  color: aliceblue;
  font-size: 4em;
}
.changeGrid{
  font-size: large;
}

.game-container {
  margin: 50px auto;
  display: grid;
  grid-template-columns:repeat(4, auto);
  grid-gap: 10px;
  justify-content: center;
  perspective: 500px;
}

.card {
  position: relative;
  height: 175px;
  width: 125px;
  cursor: pointer;
}

.card-face {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  border-width: 1px;
  border-style: solid;
  overflow: hidden;
  transition: transform 500ms ease-in-out;
  backface-visibility: hidden;
}

.card.showingCard .card-back {
  transform: rotateY(180deg); 
}

.card.showingCard .card-front {
  transform: rotateY(0); 
}

.card-back {
  background-color:aliceblue;
  border-color: aliceblue;
  transform: rotateY(0); 
}

.demonsCards {
  align-self: flex-start;
  transition: transform 100ms ease-in-out;
  transform: translateY(-10px);
}

.card:active {
  transform: scale(0.79);
  transition: transform .1s;
}

.card-front:hover .card-value {
  transform: scale(1);
}

.card-front {
  background-color: #FFBB89;
  border-color: #333;
  transform: rotateY(-180deg);
}

@media (max-width: 600px) {
  .game-container {
    grid-template-columns: repeat(2, auto)
  }

  .game-info-container {
    flex-direction: column;
    align-items: center;
  }
}