React App to Azure SignalR - FailedWritingMessageToServiceException: Unable to write message to endpoint: https://xxx-dev.service.signalr.net/

I have a react application connectining to Azure Signal R service via .NET CORE API. When the react application starts, I get a message saying it has successfully connected to the hub, but it then immediately errors out with the message 'An unexpected error occurred invoking 'GetData' on the server. FailedWritingMessageToServiceException: Unable to write message to endpoint: https://xyz-dev.service.signalr.net/'.

Please note that if I remove AddAzureSignalR() dependency, it connects to hub and successfully pulls the data continuously around 250 times, it will then disconnect automatically without any reason.

I have set up connection to the api in the useEffect hook like below

try {
        const connection_ = new HubConnectionBuilder()
          .withUrl("https://localhost:44368/hubs", {
            skipNegotiation: true,
            transport: HttpTransportType.WebSockets,
          })
          .withAutomaticReconnect()
          .configureLogging(LogLevel.Information)
          .build();

        connection_.on("DataReceived", (x, y, z) => {
         setData({
            ...data,
            x: x,
            y: y,
            z: z,
    
          });
        });

    await connection_.start();
    await connection_.invoke("GetData", location.state.id);
}
catch(e) {
console.log(e);
} 

In .NET CORE configuration services, I have added the dependencies like below.

services.AddSignalR(hubOptions =>
        {
     hubOptions.EnableDetailedErrors = true;
     hubOptions.KeepAliveInterval = TimeSpan.FromMinutes(2);
     hubOptions.ClientTimeoutInterval = TimeSpan.FromMinutes(2);
     }).AddAzureSignalR(_config.GetConnectionString("AzureSignalR"));

    app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
            endpoints.MapHub<SensorHub>("/hubs");
        });

Any help on this is very much appreciated.

Thanks