How can I programmatically activate the JavaScript behaviour of dynamically added html snippets in Tw-Elements (a Tailwind CSS library)?

Question

I'm currently looking at using TW-Elements (a UI library based on Tailwind CSS) to for a client-side serverless web application.

It works as expected, except for when the html snippet is added dynamically. Then I noticed that modals do not open and dropdowns do not drop.

I'm using the UMD version where the library is included in script tag in index.html like so:

src="/node_modules/tw-elements/dist/js/tw-elements.umd.min.js"

I have an example dropdown markup (apologies, it's humongous bulky!):

<div class="relative" data-te-dropdown-ref>
    <button class="flex items-center whitespace-nowrap rounded bg-primary px-4 pb-[5px] pt-[6px] text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] motion-reduce:transition-none" type="button" id="dropdownMenuSmallButton" data-te-dropdown-toggle-ref aria-expanded="false" data-te-ripple-init data-te-ripple-color="light">
        <span id="loggedInUserName">Lorem Ipsum</span>
        <span class="ml-2 w-2">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5">
                <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
            </svg>
        </span>
    </button>
    <ul class="absolute z-[1000] float-left m-0 hidden min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg dark:bg-neutral-700 [&[data-te-dropdown-show]]:block" aria-labelledby="dropdownMenuSmallButton" data-te-dropdown-menu-ref>
        <li>
            <a class="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-200 dark:hover:bg-neutral-600" href="#" data-te-dropdown-item-ref>My Profile</a>
        </li>
        <li>
            <a class="block w-full whitespace-nowrap bg-transparent px-4 py-2 text-sm font-normal text-neutral-700 hover:bg-neutral-100 active:text-neutral-800 active:no-underline disabled:pointer-events-none disabled:bg-transparent disabled:text-neutral-400 dark:text-neutral-200 dark:hover:bg-neutral-600" href="#" data-te-dropdown-item-ref>Sign Out</a>
        </li>
    </ul>
</div>

When the above markup exists in index.html ab initio, it works well. After page load, if I do:

document.getElementById('dropwrap').innerHTML = dropMarkup;

The dropdown does show up, but does not drop.

How can I programmatically activate the JS behaviour of dynamically added html in this situation?

I have pored endlessly through the documentation with no luck. I could see an initTE method and was wishing I could do: initTE( document.getElementById('dropwrap')-or whatever, ...) but that did not work.