js dialog won’t show up in blazor web app

im trying to link my page’s button with dialog that i have made before. it is a simple code, i have watched many tutorials and none of them solved mine

here’s my code

page.razor

@page "/datapegawai"
@inject IJSRuntime js
@attribute [StreamRendering]

<PageTitle>Data Pegawai</PageTitle>

<h1>Data Pegawai</h1>


<div class ="container">
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="header">
                    <button @onclick="ShowDialog" class="btn btn-primary float-end">
                        Add Product
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<DialogComponent>

</DialogComponent>

@code {
    private async Task ShowDialog()
    {
        await js.InvokeVoidAsync("myDialogFunction");
    }
}

dialog.js

window.myDialogFunction = function () {
    document.getElementById('my-dialog').showModal();
}

DialogComponent.razor

<div>

    <dialog id="my-dialog" @onclose="OnClose" @oncancel="OnCancel">
        <p>Hi Di sana!</p>
        <form method="dialog">
            <button>TUTUP!</button>
            <button>BATAL!</button>

        </form>
    </dialog>
</div>

@code {
    string message;
    void OnClose(EventArgs e) => message += "onclose,";
    void OnCancel(EventArgs e) => message += "oncancel,";
}

i have tried to add button to the DialogComponent.razor just to make sure the js worked. It did work, but i still have no idea how to connect my page.razor’s button with the js. thank you