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