Blazor app .NET 8 interactive buttons with @onclick not working

I am making a .NET 8 Blazor web app with interactive server components but when i make a simple button that has to perform a simple function i declared it doesn't do anything, no messages via the websockets, no UI change. I think i have done all the setup correctly, everything needed in the program cs and above the component the rendermode interactive using. Does anyone know the issue?

@rendermode InteractiveServer
@page "/users/{UserId:guid}"
@using System.Diagnostics
@using System.Security.Claims
@using Microsoft.AspNetCore.Components.Authorization
@using Domain
@using BL.IManagers
@using Domain.Extensions
@using Microsoft.Extensions.Logging.Console
@using UI.Models
@inject AuthenticationStateProvider AuthenticationStateProvider
@inject IUserManager UserManager
@inject IDepartmentManager DepartmentManager
@inject NavigationManager NavigationManager


<PageTitle>User Details</PageTitle>

<div class="mx-auto px-4 max-w-3xl py-8">
    @if (_errorMessage != null)
    {
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
            <strong>Error:</strong> @_errorMessage
        </div>
    }

    @if (_user == null)
    {
        <div class="flex justify-center items-center h-32">
            <div class="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary-blue"></div>
            <span class="ml-2">Loading user details...</span>
        </div>
    }
    else
    {
        <div class="bg-white shadow-md rounded-lg overflow-hidden">
            <div class="bg-primary-blue px-6 py-4">
                <h1 class="text-white text-xl font-bold">User Details</h1>
            </div>

            <div class="p-6">
                @if (_isCurrentUserTeamLead)
                {
                    <EditForm Model="_userInputModel" FormName="editform" OnValidSubmit="SaveChanges">
                        <DataAnnotationsValidator/>

                        <div class="grid grid-cols-1 gap-6 mb-6">
                            <div>
                                <label class="block text-gray-700 text-sm font-bold mb-2">Name</label>
                                <InputText @bind-Value="_userInputModel.Name"
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary-blue focus:border-primary-blue"/>
                                <ValidationMessage For="@(() => _userInputModel.Name)"/>
                            </div>

                            <div>
                                <label class="block text-gray-700 text-sm font-bold mb-2">Email</label>
                                <InputText @bind-Value="_userInputModel.Email"
                                           class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100"
                                           disabled/>
                            </div>

                            <div>
                                <label class="block text-gray-700 text-sm font-bold mb-2">Role</label>
                                <InputSelect @bind-Value="_userInputModel.Role"
                                             class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary-blue focus:border-primary-blue">
                                    @foreach (var role in Enum.GetValues(typeof(UserRole)))
                                    {
                                        <option value="@role">@((UserRole)role).GetDisplayName()</option>
                                    }
                                </InputSelect>
                            </div>

                            <div>
                                <label class="block text-gray-700 text-sm font-bold mb-2">Department</label>
                                <InputSelect @bind-Value="_userInputModel.SelectedDepartmentId"
                                             class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-primary-blue focus:border-primary-blue">
                                    <option value="">-- Select Department --</option>
                                    @foreach (var dept in _departments)
                                    {
                                        <option value="@dept.DepartmentId">@dept.DepartmentName</option>
                                    }
                                </InputSelect>
                            </div>
                        </div>

                        <div class="flex justify-between">
                            <button type="button" @onclick="CancelEdit"
                                    class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-medium py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-gray-500">
                                Cancel
                            </button>
                            <button type="submit"
                                    class="bg-primary-blue hover:bg-blue-700 text-white font-medium py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-300">
                                Save Changes
                            </button>
                        </div>
                    </EditForm>
                }
                else
                {
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <div>
                            <p class="text-sm text-gray-600 font-medium">Name</p>
                            <p class="text-gray-900">@_user.Name</p>
                        </div>

                        <div>
                            <p class="text-sm text-gray-600 font-medium">Email</p>
                            <p class="text-gray-900">@_user.Email</p>
                        </div>

                        <div>
                            <p class="text-sm text-gray-600 font-medium">Role</p>
                            <p class="text-gray-900">@_user.Role.GetDisplayName()</p>
                        </div>

                        <div>
                            <p class="text-sm text-gray-600 font-medium">Department</p>
                            <p class="text-gray-900">@(_user.Department?.DepartmentName ?? "None")</p>
                        </div>
                    </div>
                }
            </div>
        </div>
    }
</div>

@code {
    [Parameter] public Guid UserId { get; set; }

    private User _user;
    private UserInputModel _userInputModel;
    private bool _isCurrentUserTeamLead = false;
    private bool _isEditing = false;
	...

    private void EnableEdit()
    {
        _isEditing = true;
        StateHasChanged();
    }

    private void CancelEdit()
    {
        _isEditing = false;
        // Reset input model to discard changes
        InitializeInputModel();
        StateHasChanged();
    }
	...
 
}

app.MapRazorComponents<App>()
    .DisableAntiforgery()
    .AddInteractiveServerRenderMode();


builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();