React State-Hook variable doesn't work in async recursive function

Question

Im trying to access an Variable (that is initialized with useState) every 3 seconds. But the Variable isn't updated inside the function, when the value Variable changes. The same happens when the Variable is given as prop. The Variable itself changes, as seen by the <p>.

I've tried different methods to log the var, but everytime it logs the value that the var had when startInterval was called and not the value, it should have at that moment.

export function Test() {
  let [testState, setTestState] = useState(false);

  function startInterval() {
    // interval = setInterval(() => console.log(props.isLoggedIn), 3000);  //Doesn't work as well
    recursiveTest2()
  }

  async function recursiveTest1() {
    await new Promise(resolve => setTimeout(resolve, 3000))
    console.log(props.isLoggedIn);
    recursiveTest1();
  }

  async function recursiveTest2() {
    new Promise(resolve => setTimeout(resolve, 3000)).then(() => {
      console.log(testState);
      recursiveTest2();
    })
  }

  function toggelTestvariable() {
    setTestState(!testState);
    console.log(testState)
  }


  return ( 
    <div>
      <p> { testState.toString() } </p> 
      <button onCLick = { toggleVariable }>ToggleVariable</button>
    </div>
  )

}