Flowbite interactivity not working with Blazor 8 about flowbite-blazor HOT 7 OPEN

@inject IJSRuntime JS
<dialog id="@_dialogId" @onclose="OnClose" tabindex=" -1" class="bg-white/60 dark:bg-gray-900/80 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-40 w-full md:inset-0 h-[calc(100%-1rem)] max-h-full max-w-full">
    <div class="flex  flex-row justify-between items-start shrink-0">
        <div class="grow"></div>
        <div class="fixed inset-y-0 right-0 w-full md:w-[768px]">
            <div class="relative bg-white shadow dark:bg-gray-700 h-full overflow-y-auto">
                <!-- Modal header -->
                <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                        @DialogTitle
                    </h3>
                    <button @onclick="CloseDialog" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="crud-modal">
                        <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                        </svg>
                        <span class="sr-only">Close</span>
                    </button>
                </div>
                <!-- Modal body -->
                <div class="px-4 pt-2 pb-2 md:px-5 md:pt-3 md:pb-3">
                    @ChildContent
                </div>
            </div>
        </div>
    </div>
</dialog>

@code {
    [Parameter]
    public string DialogTitle { get; set; } = "Dialog box";
    [Parameter]
    public string ButtonLabel { get; set; } = "Show";
    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    private IJSObjectReference? _jsModule = default!;
    private string _dialogId = $"dialog{Guid.NewGuid().ToString()}";

    public async Task ShowDialog()
    {
        await _jsModule!.InvokeVoidAsync("openDialog", _dialogId);
    }

    public async Task CloseDialog()
    {
        await _jsModule!.InvokeVoidAsync("closeDialog", _dialogId);
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _jsModule = await JS.InvokeAsync<IJSObjectReference>(
                "import", "./Components/Common/Modal/UbikModal.razor.js");

            await _jsModule.InvokeVoidAsync("clickOutside", _dialogId);
        }
    }

    void OnClose(EventArgs e)
    {

    }
}

export function openDialog(dialogId) {
  document.getElementById(dialogId).showModal();
}

export function closeDialog(dialogId) {
  document.getElementById(dialogId).close();
}

export function clickOutside(dialogId) {
  var dialog = document.getElementById(dialogId)

  dialog.addEventListener('click', function (e) {
    console.info(e.target.tagName);
    if (e.target.tagName === 'DIALOG') dialog.close()
  });
}