SignalR Client doesn't receive every one of two messages

I am trying to set up SignalR for my project and I have a nonsense problem. When I trigger the message from the server side, client does not receive the first message but it receives the second. It does not receive the third, either. And it receives the fourth, it goes like this.

This is the server side:

            private readonly IHubContext<NotificationHub> _hubContext;
    
            public ReportEventHandler(IHubContext<NotificationHub> hubContext)
            {
                _hubContext = hubContext;
            }
    
            public async Task HandleEventAsync(ReportEto eventData)
            {
                await _hubContext.Clients.All.SendAsync("MessageReceived","Message");       
            }

This is the client side:

  const connection = new signalR.HubConnectionBuilder()
    .withUrl(environment.apis.default.url + '/signalr-hubs/notification')
    .withAutomaticReconnect()
    .configureLogging(signalR.LogLevel.Information)
    .build();
  connection.on('MessageReceived', () => {
    this.toastNotificationService.queueToastNotification('info', 'New Message!', 'message');
  });
  connection.start().catch(err => console.log(err));

What could be the reason? Please help me understand and fix this.