Blazor WASM - Component rendering issue

I have the following .js file in my Blazor WASM wwwroot folder, inside a "Scripts" folder :

var SignalrConnection;
var ChatProxy;

export function ChangeWeather(temperature) {
    //calling the ChangeWeather function on the signalr server
    ChatProxy.invoke('change_weather', temperature);
}

export function GetWeather() {
    ChatProxy.invoke('get_weather');
}

export function Connect() {
    var ChatServerUrl = "http://localhost:8080/";
    var ChatUrl = ChatServerUrl + "signalR";
    //This will hold the connection to the signalr hub   
    SignalrConnection = $.hubConnection(ChatUrl, {
        useDefaultPath: false
    });
    ChatProxy = SignalrConnection.createHubProxy('ChatHub');

    ChatProxy.on("NotifyUser", function (temperature) {
        $('#temp').text(temperature);
    });

    //connecting the client to the signalr hub   
    SignalrConnection.start().done(function () {
        GetWeather();
        alert("Connected to Signalr Server");
    })
        .fail(function () {
            alert("failed in connecting to the signalr server");
        })
}

Inside Blazor, i have a page that has the following code-behind logic:

using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
using Microsoft.JSInterop.Implementation;
using System.Threading.Tasks;

namespace BlazorClientJS.Pages
{
    public partial class Chat
    {
        [Inject] IJSRuntime JS { get; set; }

        string name = string.Empty;
        string temperature  = string.Empty;
        IJSObjectReference module;


        protected async override Task OnInitializedAsync()
        {
            module = await JS.InvokeAsync<IJSObjectReference>("import", "./Scripts/changeweather.js");
            await module.InvokeVoidAsync("Connect");
        }

        async Task ChangeWeather(string temperature)
        {
            if(module != null)
            {
                await module.InvokeVoidAsync("ChangeWeather", temperature);
            }
        }
    }
}

On my razor page, i have the following, simple code :

 <div style="text-align:center;">  
    <input type="text" id="txtTemperature" @bind-value="@temperature"/>  
    <button id="btnChange" @onclick="@(() => ChangeWeatherAsync(temperature))">Change Weather</button>
    
</div> 
<div style="text-align:center;">   
  Temperature : <span id="temp"></span> ℃   
</div>   

Now, when my page is loaded, I can see the connection working (I can see an alert coming from my Javascript, that is telling me the connection was established). In the HTML page, my span with id 'temp' is initialized with the value 0.

Now, when I press the "Change Weather" button, I can see the SignalR message going to the hub (let's say if my input is 1234 - I can catch it in the SignalR connection). But, the weird thing is that on the html page the #temp span does not change, it still remains 0.

BUT! If I go to another page, and then come back, I can see the value 1234, and, from now on, every change I make to the value, whenever I press the "Change Weather" button it will also change the #temp span!

What am I missing here ? Why do I have to leave, and then come back, to see these changes "live"? I assume this is something to do with Blazor/WASM.