After 50 length the button should be disabled. And is not working, works changing background color , but when I do btn.disabled = true nothing happens.

<div id="main">
    <p>Share this on Twitter</p>
    <form action="">
      <textarea></textarea>
      <div class="buttons">
        <span class="limit">100</span>
        <button class="btn">Tweet</button>
      </div>
    </form>
  </div>

JS:

const input = document.querySelector("textarea");
const btn = document.querySelector(".btn");
const limit = document.querySelector(".limit");
let max = 50;

const updateLimit = () => {
  limit.textContent = max;
  input.addEventListener("input", () => {
    let inputLength = input.value.length;
    limit.textContent = max - inputLength;
    if (inputLength > max) {
      btn.disabled = true;
      limit.style.color = "red";
    } else {
      btn.disabled = false;
      limit.style.color = "black";
    }
  });
};

updateLimit();