Need help with some javascript code - inside handleSubmit function highlighted in bold. the current code has a trafficlight where green color lights up for few seconds and then yellow for few seconds and red for few seconds. The code needs to wait for 2 seconds or whatever seconds the user enters before lighting up each color. so it would be wait 2 seconds, light green color, then wait 2 seconds, then yellow and so on.

There is some react code as well but i just need help with the javascript part which is highlighted in bold inside the trafficlight.js file. Thank you.

TrafficLight.js

import Light from "./Light";

import React, { useState, useEffect } from "react";

const TrafficLight = ({ initialColor }) => {

const [colorIndex, setColorIndex] = useState(initialColor);

const [value, setValue] = useState(2000);

const lightDuration = [4000, 5000, 2000];

useEffect(() => {

const timer = setTimeout(() => {

setColorIndex((colorIndex + 1) % 3);

}, lightDuration[colorIndex]);

return () => {

clearTimeout(timer);

};

});

const handleSubmit = (event) => {

event.preventDefault();

}

return (

Time:

type="text"

name="time"

value={value}

onChange={(e) => {

setValue(e.target.value);

}}

/>

);

};

export default TrafficLight;

Light.js

import React from "react";

const Light = ({ color, active }) => (

className="light"

style={{ backgroundColor: color ,opacity: active ? 1 : 0.2}}

/>

);

export default Light;