I am trying to create a simple crossroad with 2 traffic lights that are dependent on each other (just like in real life). The traffic light will turn green/red based on the traffic data we receive from the backend. There is a totalAmountTime variable which holds the total amount of one cycle. Let's take totalAmountTime =10

The default data of the first cycle is [6,4] (6 seconds green for the bottom to up direction and then 4 seconds green for the right to left direction)

Every 10 seconds(totalAmountTime ) we have to fetch an endpoint taking the traffic data and then render dynamically the time for each direction. Lets suppose the data from backend is an array like [2,8] , the first one holding green seconds from bottomToUp direction

Here you can see the code on stackblitz and the way I approached it but it's not working. I think I'm not using right the useIntervals and setTimeouts

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