react，使用es6语法，如何才能实现成功打印出内容后就自动清除定时器的效果？

代码如下：

  const [v1, setV1] = useState('')
  const [v2, setV2] = useState('')
  const [v3, setV3] = useState('')
  const [v4, setV4] = useState('')
  var timer = 2
  setTimeout(() => {
    let stg = document.getElementById("stg")
    let rtg = document.getElementById("rtg")
    let ytg = document.getElementById("ytg")
    let ntg = document.getElementById("ntg")
    if (timer == 0) {
      clearTimeout(timer)
    } else {
      setV1(stg.innerText)
      setV2(rtg.innerText)
      setV2(ytg.innerText)
      setV2(ntg.innerText)
      timer--
    }
  }, 1000)
  console.log(v1, v2)

打印结果是每一秒打印一次，无限循环，即使clearTimeout也清除不了定时器
请问如何修改才能实现成功打印出内容后就自动清除定时器的效果？请在现有代码基础上展示说明

setState会更新组件，更新组件会重新执行组件体，也就是每次timer=2都会被执行

  const [v1, setV1] = useState('')
  const [v2, setV2] = useState('')
  const [v3, setV3] = useState('')
  const [v4, setV4] = useState('')
  cosnt [timer, setTimer] = useState(2)
  setTimeout(() => {
    let stg = document.getElementById("stg")
    let rtg = document.getElementById("rtg")
    let ytg = document.getElementById("ytg")
    let ntg = document.getElementById("ntg")
    if (timer == 0) {
      clearTimeout(timer)
    } else {
      setV1(stg.innerText)
      setV2(rtg.innerText)
      setV2(ytg.innerText)
      setV2(ntg.innerText)
      setTimer(--timer)
    }
  }, 1000)
  console.log(v1, v2)