Why animation works only from 2nd time [duplicate]

please advise me. Why the property tranzition trigger only from 2 times. In the 1st time the square as if “teleported”. I attach the code

I expected the animation to work the first time around…

h1 {
  text-decoration: underline;
}

.square {
  transition: all 1s ease-out;
  background-color: red;
  width: 2rem;
  height: 2rem;
  position: relative;
}

body {
  box-sizing: border-box;
}

const square = document.querySelector(".square");
const button = document.querySelector(".button");

console.log(window.innerWidth);
let position = 0;

const onClick = (el) => {
  button.disabled = true;

  if (position === 0) {
    el.style.setProperty("left", "calc(100% - 2rem)");
    position = 1;
    setTimeout(() => {
      button.disabled = false;
    }, 1000);
    return;
  }
  el.style.setProperty("left", "0");
  position = 0;
  setTimeout(() => {
    button.disabled = false;
  }, 1000);
  return;
};

button.addEventListener("click", () => {
  onClick(square);
});