I'm making the video controls which can switch show or hide.
Function of the video controls will disappear after 3 second.
But when execute setTimeout several times, it wouldn't disappear in 3 second.
I want to make it disappear in 3 second even executed several times.

My code is:

const [showVideoControls, setShowVideoControls] = useState(false);
const [secondCall, setSecondCall] = useState(false);
let timeoutID;

 function setUpVideoControls() {
    if (!showVideoControls) {
      setShowVideoControls(true);
    } else {
      setShowVideoControls(false);
    }
  }

  function offVideoControls() {
    return new Promise(resolve => {
      resolve(setSecondCall(true));
    });
  }

  function callUnified() {
    if (secondCall) {
      return new Promise(resolve => {
        resolve(unified());
      });
    }
  }

  function tmp() {
    return new Promise(resolve => {
      resolve(unified2());
    });
  }

  function unified() {
    clearTimeout(timeoutID);
    setSecondCall(false);
  }

  function unified2() {
    timeoutID = setTimeout(function () {
      setShowVideoControls(false);
    }, 3000);
  }

  async function callingFirstTime() {
    await tmp();
    await offVideoControls();
  }

  async function callingAfterSecondTime() {
    await callUnified();
  }

...

<View style={{ width: '100%', height: '100%' }}>
  <TouchableWithoutFeedback
    onPress={() => {
      if (secondCall) {
        callingAfterSecondTime();
      }
      setUpVideoControls();
      callingFirstTime();
      }}>
    <Text
      style={{
        flex: 1,
       }}>
      {''}
    </Text>
  </TouchableWithoutFeedback>
</View>

Function of My code is:

①execute setTimeout
②clearTimeout(shold be canceled previous setTimeout)
③execute setTimeout

I think my code is fine, But it doesn't work well.
How can I fix that?
Any advice you could give would be much appreciated.