classList.remove não funciona

[Azarath 0]

Estou tentando fazer um modal, o script ta adicionando a classe normalmente, mas não está removendo.

Código:

const abreItem1 = document.querySelector('.js-open-item-1');
const fechaItem1 = document.querySelector('.js-close-item-1');
const modalItem1 = document.getElementById('modal-item-1');

function ativaItem1() {
  modalItem1.classList.add('item-1-ativo');
}

function desativaItem1() {
  modalItem1.classList.remove('item-1-ativo');
}
abreItem1.addEventListener('click', ativaItem1);
fechaItem1.addEventListener('click', desativaItem1);

.modal-item-1 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
}

.modal-item-1.item-1-ativo {
  opacity: 1;
  pointer-events: all;
}

.modal-item-1 .overlay-item-1 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 0;
}

.box-item-1 {
  position: relative;
  background-color: #000;
  z-index: 2;
  margin: 0 auto;
  max-width: 700px;
  padding: 20px 0 80px 0;
}

.js-close-item-1 {
  width: 40px;
  height: 40px;
  margin: 0 40px 40px 20px;
  z-index: 25;
  cursor: pointer;
}

<div class="personagem-1 js-open-item-1">
  <h2>We just don’t know what to expect</h2>
  <p>Wanda</p>
  <div class="modal-item-1" id="modal-item-1">
    <div class="overlay-item-1"></div>
    <div class="box-item-1">
      <img src="img/close.svg" class="js-close-item-1">
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus repudiandae ducimus illo reprehenderit aliquam maxime repellendus quam unde provident cupiditate accusamus odio, sunt suscipit impedit animi libero nobis. Earum, explicabo?</p>
    </div>
  </div>
  <!--modal-item-1-->
</div>