How can I set href in blazor component?

I'm trying to set up a navigation where the links are set by appsettings.json values. Maybe there is a much better way to do this without Javascript?

This is my component, named Navigation.razor

@inject IConfiguration Configuration@inject IJSRuntime JSRuntime<a id="test-link">Test</a><script>    function SetNavlinks(url){        var a = document.getElementById('test-link')        a.setAttribute("href", url);    }</script>@code{    protected override async Task OnInitializedAsync()    {               await InitializeNavigation();        InvokeAsync(StateHasChanged);    }    Task InitializeNavigation(){        var testLinkURL = Configuration.GetValue<string>("ContentURLs:Values:TestLink");        JSRuntime.InvokeVoidAsync("SetNavlinks", testLinkURL);        return Task.CompletedTask;    }}

The problem is after the page loads the DOM looks like this:

<a id="test-link">Test</a>

But if use document.getElementById('test-link') in the dev console, it shows this:

<a href="https://itworks.com" id="test-link">Test</a>