I'm trying to embed an audio player using a javascript library called Wavesurfer.js in my Blazor component. I'm setting the IDs of the needed divs by generating GUIDs for them in the razor.cs page, then handing those values to the .razor component:

// WavePlayer.razor.cs
private Guid _mainDivGuid;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        _interop = new WavesurferJsInterop(_js, DotNetObjectReference.Create<WavePlayer>(this));

        if (_interop != null)
        {
            await _interop.Create(_mainDivGuid, Options);
            //preload file if URL already supplied
            if (Url != null)
            {
                await Load(Url);
            }
        }
    }
}

protected override void OnInitialized()
{
    _mainDivGuid = Guid.NewGuid();
}

// WavePlayer.razor
<div class="wavesurfer-ui-main" id="@_mainDivGuid"></div>

In the js interop it calls the actual wavesurfer.js where the Create method is invoked, and passes the GUID of the div where the player should get rendered.

When I run the component, I'm getting an error Error: Container element not found and I can confirm this in the js by adding a test for

if (!document.getElementById(mainDivGuid)) {
    console.log(mainDivGuid);
    console.log("No div element found for wavesurfer mainDivGuid"); // this gets logged
}

mainDivGuid is being created, it's the correct GUID, but by the time the Create method is invoked, the div apparently doesn't exist in the DOM.

Shouldn't using the OnAfterRenderAsync method ensure that the DOM is fully rendered before the Create gets called? I'm not sure how the wave player can be trying to fire its own events before the container exists!