Make traffic signals timer dynamic on textinput

Question

When I take input, if the go on increasing the seconds it works fine but once when I go on decreasing the seconds the flow of the signal changes. I have taken a junction which obviously has to work on a flow, for which I have taken

const signalOrder = ['signalOne', 'signalTwo', 'signalThree', 'signalFour'];

I have used useEffect to render the lights when the app is opened and updated the effects on state. my states are...

  const [signal, setSignal] = useState(signalOrder[0]);
  const [visible, setVisible] = useState(true);
  const [seconds, setSeconds] = useState('2');
  const [sec, setSec] = useState('1');

useEffect(() => {
    setTimeout(() => {
      var index = signalOrder.indexOf(signal);
      setSignal(() => {
        if (index === signalOrder.length - 1) {
          return (index = 0), signalOrder[index];
        } else {
          return index, signalOrder[index + 1];
        }
      });
      console.log(signal, sec);
    }, sec * 1000);
  });

Rest of my code...

const changeTime = () => {
    setVisible(true), setSec(seconds);
  };

return ===>

 <SafeAreaView style={styles.junction}>
      <View style={styles.top}>
        <View
          style={[
            styles.signalOne,
            {backgroundColor: signal == 'signalOne' ? 'green' : 'red'},
          ]}
        />
      </View>
      <View style={styles.middle}>
        <View
          style={[
            styles.signalTwo,
            {backgroundColor: signal == 'signalFour' ? 'green' : 'red'},
          ]}
        />
        <View
          style={[
            styles.signalThree,
            {backgroundColor: signal == 'signalTwo' ? 'green' : 'red'},
          ]}
        />
      </View>

      <View style={styles.bottom}>
        <View
          style={[
            styles.signalFour,
            {backgroundColor: signal == 'signalThree' ? 'green' : 'red'},
          ]}
        />
      </View>

      <View style={styles.timer}>
        {visible ? (
          <TouchableOpacity
            style={styles.timerButton}
            onPress={() => setVisible(false)}>
            <Icon name={'stopwatch'} size={70} color={'blue'} />
          </TouchableOpacity>
        ) : (
          <View style={styles.inputView}>
            <TextInput
              style={styles.textInput}
              value={seconds}
              // placeholder={seconds}
              onChangeText={second => setSeconds(second)}
              keyboardType="number-pad"
            />
            <TouchableOpacity onPress={changeTime}>
              <Icon name={'checkmark-done'} size={40} color={'blue'} />
            </TouchableOpacity>
          </View>
        )}
      </View>
    </SafeAreaView>

I have tried adding dependencies on useEffect , to make it re-render when the seconds changes.