runtime: Blazor Webassembly shows wrong time in UI

I’m developing my app in .Net 5.0 Blazor WebAssembly. I’m displaying current time in HTML. But the time displayed is always -5.30 Hrs the time displayed in my system clock. My computer time is set to UTC+5.30 time zone.

After some googling I found the following in official docs.

I added the below tags in .csproj file but still no luck.

Here is my code:

.csproj:

<PropertyGroup>
    <TargetFramework>net5.0</TargetFramework>
    <BlazorWebAssemblyLoadAllGlobalizationData>true</BlazorWebAssemblyLoadAllGlobalizationData>
    <InvariantGlobalization>true</InvariantGlobalization>
    <ServiceWorkerAssetsManifest>service-worker-assets.js</ServiceWorkerAssetsManifest>
</PropertyGroup>

<ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.0" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.0" PrivateAssets="all" />
    <PackageReference Include="Microsoft.Extensions.Localization" Version="5.0.0" />
    <PackageReference Include="System.Net.Http.Json" Version="5.0.0" />
</ItemGroup>

Code:

@using System.Threading
@implements IDisposable

<p>@CurrentDateTime</p>

@code {
    private Timer _timer;
    public string CurrentDateTime { get; set; }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            _timer = new Timer(DateTimeCallback, null, TimeSpan.FromSeconds(1), TimeSpan.FromSeconds(1));
        }
    }

    private async void DateTimeCallback(object state)
    {
        CurrentDateTime = DateTimeOffset.UtcNow.ToLocalTime().ToString("dd MMM yyyy hh:mm:ss tt");
        await InvokeAsync(StateHasChanged);
    }

    public void Dispose()
    {
        _timer?.Dispose();
    }
}

Time Screenshot:

Please assist on what I’m missing.