使用addEventListener添加带有参数的回调时出了点问题

Question

我使用addEventListener添加带有参数的回调，但是出了点问题

我实现了一个带覆盖的模式对话框组件： 单击按钮时，将显示模态。 单击叠加时，模态将消失。

html：

<button class="common-btn">Click me to show a common modal</button>
<div class="modal common">
    <div class="modal-overlay"></div>
    <div class="modal-content">
        <div>This is a common modal</div>
    </div>
</div>

css：

.modal {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 900;
}

.modal .modal-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 910;
}

.modal .modal-content {
  padding: 20px;
  border: 1px solid #000;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  z-index: 920;
}

js：

const commonBtn = document.querySelector('.common-btn');
const commonModal = document.querySelector('.modal.common');

function toggleModal(modalEle) {
    console.log('func is called');
    const preModalDisplay = modalEle.style.display;
    if (preModalDisplay === 'block') {
        modalEle.style.display = 'none';
        modalEle
            .querySelector('.modal-overlay')
            .removeEventListener('click', () => {
                toggleModal(modalEle);
            });
    } else {
        modalEle.style.display = 'block';
        modalEle.querySelector('.modal-overlay').addEventListener('click', () => {
            toggleModal(modalEle);
        });
    }
}

commonBtn.addEventListener('click', () => {
    toggleModal(commonModal);
});

预期结果应该是：

click on btn: display
click on overlay: disappear
click on btn: display
click on overlay: disappear
click on btn: display
click on overlay: disappear
...

但是实际结果是：

click on btn: display
click on overlay: disappear
click on btn: display
click on overlay: still display, and the callback func is called twice

回调有问题，有人可以告诉我这是什么问题吗？谢谢。