Issue with Modal in Material Design for Bootstrap Standard MDB5

Question

Intro

I'm using MDB5 Standard for a project, and I am trying to show a Modal so when a user clicks a button it displays typical stuff.

However, I've been copying the basic example on the website here:

https://mdbootstrap.com/docs/standard/components/modal/#docsTabsOverview

Just so I can get a grasp of it.

Problem

The problem is, I don't have the option for a data-mdb-toggle attribute on the activation button so have resorted to displaying it through Javascript.

Code:

window.addEventListener("DOMContentLoaded", function() {
  const modalEl = document.getElementById("testmodal");
  const modal = new mdb.Modal(modalEl);
  var activate = document.getElementById("show-modal");

  activate.addEventListener("click", function() {
    modal.show();
  });
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<div class="modal fade" id="testmodal" tabindex="-1" aria-labelledby="testModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="model-content">
      <div class="modal-header">
        <h4 class="modal-title">Edit Room</h4>
        <button type="button" class="btn-close-white" data-mdb-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">...</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
                    Close
                </button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<!--The button HTML: -->

<button type="button" id="show-modal" class="btn btn-primary">
    <i class="fas fa-plus"></i>Make a new Booking
                </button>

When it's clicked I just get this instead of what is expected.

Has anyone had this before?