Attempt to embed back Power BI report fails on Blazor page

My Blazor server app has a page that shows an embedded Power BI report.

The implementation is relatively straightforward: I have a empty div in my page named reportContainer, and use the powerbi.embed(reportContainer, config) provided by PowerBI.js to embed the report.

And it works fine. I can see my report rendered.

I also need to remove the report in some cases. And embed it back if the user wants to. The way I remove the embedded report is simply setting the container div to empty again via JS interop. And embedding back just uses the same code as the first rendering.

Here's the relevant code.

In Blazor page:

private async Task RemoveReportAsync() {
    await JSRuntime.InvokeVoidAsync("removeReport");
}

private async Task ShowReportAsync() {
    ....
    await JSRuntime.InvokeVoidAsync("showReport");
}

In script:

function showReport(...) {
    var config = ...;
    var reportContainer = document.getElementById('reportContainer');
    powerbi.embed(reportContainerDiv, config);
}

function removeReport(){
    var reportContainer = document.getElementById('reportContainer');
    reportContainer.innerHTML = "";
}

However, while I can show the report for the first time and remove the report with no problem, subsequential calls to the ShowReportAsync doesn't work. I can still observe the JS method being executed. But the report is not embedded, and the container div remain empty.

What am I missing here? Is there a better way to implement this?