So I have a blazor component which runs a javascript method inside its OnInitializedAsync method. But it returns null somehow, although the javascript function itself returns something for sure which I checked using debugging. I logged the result of the javascript function and put console.log before and behind the return and behind it didn't show which means it returned something. What it's supposed to return i already debuged using console.log and its the correct result. This is the code of my blazor component:

@using System.Diagnostics
@inject IJSRuntime _jsRuntime

<div class="summoner-icon" style='background-image: url("@IconPath");'>
    <div class="summoner-level-circle" style="background-color: @_mainColor;">
        <a>@Level</a>
    </div>
</div>

@code {
    [Parameter]
    public string IconPath { get; set; }
    [Parameter]
    public long Level { get; set; }
    private string _mainColor;
    protected override async Task OnInitializedAsync()
    {
        _mainColor = await _jsRuntime.InvokeAsync<string>
            ("getProfileIconMainColor", IconPath);
    }
}

Besides that, here you can see the javascript function:

window.getProfileIconMainColor = function (url) {
    const image = document.createElement('img');
    image.src = url;
    image.crossOrigin = "anonymous";
    image.onload = function () {
        const colorThief = new ColorThief();
        const mainColor = colorThief.getColor(image);
        return rgbToHex(mainColor[0], mainColor[1], mainColor[2]);
        /*return "rgb(" + colorThief.getColor(image).join(",") + ")";*/
    }
}

const rgbToHex = (r, g, b) => '#' + [r, g, b].map(x => {
    const hex = x.toString(16)
    return hex.length === 1 ? '0' + hex : hex
}).join('');