I need help with React.js. I have to create a trafficlight where one light will turn on for few seconds and the other lights will turn on for another few seconds respectively. So far I have only created three lights without any functionalities. I will post the .js files and css.

Light.js

import "./App.css";

const Light = ({ color }) => {

return

;

};

export default Light;

Stoplight.js

import Light from "./Light";

import "./App.css";

import { useState } from "react";

const Stoplight = () => {

return (

);

};

export default Stoplight;

App.js

import './App.css';

import Light from './Light';

import Stoplight from './Stoplight';

App.css

function App() {

return (

);

}

export default App;

App.css

.App {

text-align: left;

}

.light {

margin: 10px;

border-radius: 50%;

width: 100px;

height: 100px;

}

.App-header {

background-color: #282c34;

min-height: 100vh;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

font-size: calc(10px + 2vmin);

color: white;

}