React not receive message signalr .net - reactjs

Question

im trying to implement alerts from backed to my React front with signalr, but actually the client connect successful but not receive alerts(messages) when I send from the backend:
Backend .net 6:
Interface:
namespace BucciaratiMessenger.Hubs
{
public interface IAlertClient
{
Task ReceiveAlert(Alert alert);
}
}
Hub:
namespace BucciaratiMessenger.Hubs
{
public class AlertHub : Hub<IAlertClient>
{}
}
Program:
builder.Services.AddSignalR();
builder.Services.AddCors(options =>
{
options.AddPolicy("ClientPermission", policy =>
{
policy.AllowAnyHeader()
.AllowAnyMethod()
.WithOrigins("http://localhost:3000")
.AllowCredentials();
});
});
var app = builder.Build();
app.MapHub<AlertHub>("hubs/alert");
Controller:
[Produces("application/json")]
[ApiController]
[Route("api/[controller]")]
public class AlertController :Controller
{
private readonly IHubContext<AlertHub, IAlertClient> _alertHub;
public AlertController(IHubContext<AlertHub, IAlertClient> alertHub)
{
this._alertHub = alertHub;
}
[Route(nameof(AlertController.RegisterAlert)), HttpPost]
public async Task<IActionResult> RegisterAlert(Alert entity)
{
try
{
await _alertHub.Clients.All.ReceiveAlert(entity);
...
}catch(Exception ex)
{
...
}
}
}
React Client:
const HeaderComp = (props) => {
const[connection, setConnection] = useState(null)
const [ alert, setAlert ] = useState([]);
const latestAlert = useRef(null)
const[countAlert, setCountAlert] = useState(0)
useEffect(() => {
const newConnection = new HubConnectionBuilder()
.withUrl('http://localhost:5146/hubs/alert')
.withAutomaticReconnect()
.build();
setConnection(newConnection);
}, []);
useEffect(() => {
if (connection) {
connection.start()
.then(result => {
console.log('Connected!')
connection.on('ReceiveAlert', message => {
const updatedChat = [...latestAlert.current]
updatedChat.push(message)
setAlert(updatedChat)
setCountAlert(countAlert+1)
});
})
.catch(e => console.log('Connection failed: ', e));
}
}, [connection]);
return (
<Layout>
...
</Layout>
)
}
export default HeaderComp
In the Console.log I get success connection to http://localhost:5146/hubs/alert.
When I send to the method controller any message, not occur any exception, but the client not receive the alert.

Answer 1

The problem were the two useEffect, only need one:
useEffect(() => {
const connection = new HubConnectionBuilder()
.withUrl('http://localhost:5146/hubs/alert')
.withAutomaticReconnect()
.build();
connection.start()
.then(result => {
console.log('Connected!');
connection.on('ReceiveAlert', message => {
setCountAlert(countAlert+1)
});
})
.catch(e => console.log('Connection failed: ', e));
}, []);