Toast classList error

Expected behavior

    let stackCount = 0;

function showToast(title, text) {
  stackCount++;

  const toast = document.createElement('div');
  toast.innerHTML = `
  <div class="toast-header">
    <strong class="me-auto">${stackCount}</strong>
    <small>11 mins ago</small>
    <button
      type="button"
      class="btn-close"
      data-mdb-dismiss="toast"
      aria-label="Close"
    ></button>
  </div>
  <div class="toast-body text-start">
    Stacking element
  </div>
  `;

  toast.classList.add('toast', 'fade');

  document.getElementById('stacking-container').appendChild(toast);
  /*this is line 102*/
  const toastInstance = new mdb.Toast(toast, {
    stacking: true,
    hidden: true,
    width: '450px',
    position: 'top-right',
    container: '#stacking-container',
    autohide: true,
    delay: 5000,
  });

  toastInstance.show();
});

Each call to the showToast function produces a new toast

Actual behavior

I get the following error

Uncaught TypeError: Cannot read properties of undefined (reading 'classList')
at Object.addClass (manipulator.js:98)
at r.value (toast.js:194)
at r.value (toast.js:125)
at new r (toast.js:54)
at showToast (agfisnam:102)
at HTMLDocument.<anonymous> (agfisnam:69)
at e (jquery-3.6.0.min.js:2)
at t (jquery-3.6.0.min.js:2)

Line 103 correspond to

const toastInstance = new mdb.Toast ...

Resources (screenshots, code snippets etc.)