Не могу найти где код ломается setTimeout

Задача написать приложение светофора на реакте. Данный код выполняется в порядке К => Ж => З => Ж => К и далее при попытке снова запустить цикл перейдя на желтый падает в ошибку. Понимаю, что не срабатывает setTimeout, но не могу понять почему)

     React.useEffect(() => {
    console.log('effect')
    const link = window.location;
    console.log(link.pathname)
    if (link.pathname === '/red') {
      console.log('red')
      const timer = setTimeout(() => {
        setFromRedToYellow(true)
        setFromGreen(false);
        setFromYellowToGreen(false)
        setFromGreenToYellow(false)
        setFromYellowToRed(false)
      }, 10000)
      
    } else if (link.pathname === '/yellow') {
      console.log('yellow')
      if (fromGreen) {
        const timer = setTimeout(() => {
          setFromYellowToRed(true)
          setFromRedToYellow(false);
          setFromYellowToGreen(false)
          setFromGreenToYellow(false)
          setFromGreen(false)
        }, 3000)
        return () => clearTimeout(timer);
      } else {
        console.log('1111111')
        console.log('test2')
        const timer = setTimeout(() => {
          console.log('test22')
          setFromRedToYellow(false)
          setFromYellowToGreen(true)
          setFromGreenToYellow(false)
          setFromYellowToRed(false)
          setFromGreen(false)
        }, 3000)
        return () => clearTimeout(timer);
      }
    } else if (link.pathname === '/green') {
      console.log('green')
      const timer = setTimeout(() => {
        setFromGreen(true)
        setFromRedToYellow(false)
        setFromYellowToGreen(false)
        setFromGreenToYellow(true)
        setFromYellowToRed(false)
      }, 15000)
      return () => clearTimeout(timer);
    }
  })



   
  return (
    <div className="page">
      <main className="main">
        <Switch>
          <Route path='/red'>
            {fromRedToYellow ? <Redirect to="/yellow" /> : <TrafficLights redOn={redOn} />}
          </Route>
          <Route path='/yellow'>
            {fromYellowToGreen ? <Redirect to='/green' /> : (fromYellowToRed ? <Redirect to='/red' /> : <TrafficLights yellowOn={yellowOn} />)}
          </Route>
          <Route path='/green'>
          {fromGreenToYellow ? <Redirect to="/yellow" /> : <TrafficLights greenOn={greenOn} />}
          </Route>
          <Route path="/" >
            <Redirect to='/red' />
          </Route>
        </Switch>
      </main>
    </div>
  )

И сама ошибка:

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.