Estoy tratando de crear un cruce de caminos simple con 2 semáforos que dependen uno del otro (como en la vida real). El semáforo se volverá verde/rojo según los datos de tráfico que recibamos del backend. Hay una variable totalAmountTime que contiene la cantidad total de un ciclo. Tomemos totalAmountTime = 10

Los datos predeterminados del primer ciclo son [6,4] (6 segundos en verde para la dirección de abajo hacia arriba y luego 4 segundos en verde para la dirección de derecha a izquierda)

Cada 10 segundos (totalAmountTime) tenemos que buscar un punto final que tome los datos del tráfico y luego represente dinámicamente el tiempo para cada dirección. Supongamos que los datos del backend son una matriz como [2,8] , la primera contiene segundos verdes desde la dirección bottomToUp

Aquí puede ver el código en stackblitz y la forma en que lo abordé, pero no funciona. Creo que no estoy usando bien useIntervals y setTimeouts

https://stackblitz.com/edit/react-mq4teg?file=src%2FApp.js