MDB5 Modal not working with Fontawesome Icon

**Expected behavior**A Modal should open, if I click on a button. Then an event (Javascript) should modify the modal while showing modal**Actual behavior**If I click directly on the icon, the modal open, but the event (Javascript) didn't start and an error occurs:

mdb.min.js:306 Uncaught TypeError: Illegal invocation at Object.findOne (mdb.min.js:306) at new i (mdb.min.js:312) at i. (mdb.min.js:312) at new i (mdb.min.js:312) at HTMLButtonElement. (mdb.min.js:312) at HTMLDocument.e (mdb.min.js:306)findOne @ mdb.min.js:306i @ mdb.min.js:312(anonymous) @ mdb.min.js:312i @ mdb.min.js:312(anonymous) @ mdb.min.js:312e @ mdb.min.js:306**Resources (screenshots, code snippets etc.)**![enter image description here][1]![enter image description here][2] [1]: https://usercontent.mdbootstrap.com/mdb-images/support/891756d2-1a86-4f5f-9227-08ed03095f83-error.jpg [2]: https://usercontent.mdbootstrap.com/mdb-images/support/592b2ffb-1212-4374-ab92-858658cd345c-ok.jpg

              <button type="button" class="btn btn-outline-success ms-5" 
          data-mdb-ripple-color="success"
          data-mdb-toggle="modal"
          data-mdb-target="#modalEdit"
          data-mdb-id="-1">
          <i class="fa fa-plus"></i>
      </button>

Javascript

` const modalEdit = document.getElementById('modalEdit');

modalEdit.addEventListener('show.mdb.modal', (event) => {

  const button = event.relatedTarget;

  modalEdit.querySelector('.modal-title').textContent = `Edit Setting`;
  document.getElementById('set-Name').value = "Test";
  document.getElementById('btnOk').textContent = "Update";
})`