*_Expected behavior_*Calendar should load

*_Actual behavior_*Error with:

ReferenceError: mdb is not defined
    at at._initSelect (calendar.js:1797:11)
    at at.init (calendar.js:228:10)
    at new at (calendar.js:186:10)
    at calendar.js:2104:57
    at Array.forEach (<anonymous>)
    at calendar.js:2104:41
    at chunk-72KXSWY5.js?v=e33ca043:9:85
    at ../../../node_modules/mdb-calendar/js/calendar.min.js (chunk-72KXSWY5.js?v=e33ca043:10:6)
    at __require (chunk-BUSYA2B4.js?v=e33ca043:3:50)
    at mdb-calendar.js?v=e33ca043:5:16

Resources (screenshots, code snippets etc.)

---
import Layout from 'src/layouts/LoggedInLayout.astro';
import {Session} from "src/components/handlers";
import 'mdb-calendar/css/calendar.min.css';
---

<Layout title="Calendar">
    <calendar-element>
        <section class="mt-5 pt-5">
            <div class="shadow-4 rounded-5 overflow-hidden">
                <div class="calendar" data-mdb-calendar-init id="calendar"></div>
            </div>
        </section>
    </calendar-element>
</Layout>

<script>
    import * as mdb from 'mdb-ui-kit/js/mdb.es.min';
    import {Calendar} from 'mdb-calendar';

    class CalendarElement extends HTMLElement {
        constructor() {
            super();
        }
    }
    customElements.define('calendar-element', CalendarElement);
</script>