I have a blazor app, and I'm trying to implement PayPal purchase button. It generates the button but it does not work. When pressed and inspected the console says that

Uncaught Error: Document is ready and element #paypal-button-container does not exist

The script for the Paypal button is in wwwroot folder, in javascript file. The function of the script is being called in the blazor component page Index.razor

@page "/"
@inject IJSRuntime JS
@inject AuthenticationStateProvider AuthenticationStateProvider
@using LoginComponent
@using Client.Data
<AuthorizeView>
    <Authorized>
        Hi, @context.User.Identity.Name
        <div id="paypal-button-container"></div>
    </Authorized>
    <NotAuthorized>
        <Login/>
    </NotAuthorized>
</AuthorizeView>


@code
{
    double a = 9.99;

    protected override async Task OnInitializedAsync()
    {
        
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("LoadButtonPaypal", a);
        }
    }
}

Inspect element error:

Uncaught Error: Document is ready and element #paypal-button-container does not exist
    at js?client-id=test:2
    at new n (js?client-id=test:2)
    at Ce (js?client-id=test:2)
    at js?client-id=test:2
    at Function.n.try (js?client-id=test:2)
    at fn (js?client-id=test:2)
    at js?client-id=test:2
    at Function.n.try (js?client-id=test:2)
    at Object.render (js?client-id=test:2)
    at js?client-id=test:2

Why does it not find the #paypal-button-container? Or is this not the problem why is it not working

Here is the script for the button from The PayPal website.