Toast not showing up Bootstrap 5 with modules

I'm trying to create a website using just Bootstrap 5 and vanilla JS with modules, but I'm having a problem using Bootstrap Toast. I have successfully created the instance, but when I call the function to show, nothing happens.

I have a module imported that returns this bootstrap element: import toast from "../../components/toast/toast.js";

When I call toast() it returns this HTML element:

<div aria-atomic="true" aria-live="assertive" 
     class="toast" role="alert">
    <div class="toast-header">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
        <button aria-label="Close" class="btn-close" 
                data-bs-dismiss="toast" type="button">
        </button>
    </div>
    <div class="toast-body">
        Hello, world! This is a toast message.
    </div>
</div>

I'm using bootstrap as a module: import { Toast } from '../../plugins/bootstrap-5.0.0-beta1-dist/js/bootstrap.esm.js'

And creating my toast like this:

    const toastEl = toast();
    const myToast = new Toast(toastEl);
    myToast.show();

In debugging, I can see that my instance 'myToast' returns the following.

Toast {_element: div.toast, _config: {…}, _timeout: null}config: {animation: true, autohide: true, delay: 5000}element: div.toast_timeout: null__proto: BaseComponent