Styles on a class added by ClassList isn’t working

My code seems to be fine, when I console.log the class name it shows that the class is added, but the styles are not working. It was working just fine before but idk what triggered this problem now.
Any help would be appreciated!

JS code:

let maxAmountMessageTimeoutId;
// Max Amount Added Message Visibility
export function displayMaxAmountMessage(productId) {
  const maxAmountMessage = document.querySelector(`.js-max-amount-message-${productId}`);

  maxAmountMessage.classList.add("max-amount-message-visible");

  if (maxAmountMessageTimeoutId) {
    clearTimeout(maxAmountMessageTimeoutId);
  }

  const timeoutId = setTimeout(() => {
    maxAmountMessage.classList.remove("max-amount-message-visible");
  }, 2000);

  maxAmountMessageTimeoutId = timeoutId;
  console.log(maxAmountMessage.className);
}

CSS code:

.max-amount-message {
  color: red;
  font-size: 15px;
  opacity: 0;
}

.max-amount-message-visible {
  opacity: 1;
}

I tried putting the function in the main file, and put “let maxAmountMessageTimeoutId;” before the click event listener out of scope as a global variable but nothing I try works. If I delete the line “let maxAmountMessageTimeoutId;” then the message appears but invokes errors and clearTimeout doesn’t work obviously.