This is my state to cancel the the animations.

  const [cancelAnim, setCancelAnim] = useState(false);

This is my chain of async functions that loops back with awaits.

  const startServiceAnimation = async () => {
    setFirst(true);
    animationZeroComplete();
  };

  const animationZeroComplete = async () => {
    console.log("cancelAnim");
    console.log(cancelAnim);
    if (cancelAnim) return;
    ......
    const animOne = animateOne(sequenceOne);
    setAnimationOne(animOne);
    await animOne;
    animationOneComplete();
  };

  const animationOneComplete = async () => {
    console.log("cancelAnim");
    console.log(cancelAnim);
    if (cancelAnim) return;
    ......
    const animTwo = animateTwo(sequenceTwo);
    setAnimationTwo(animTwo);
    await animTwo;
    animationTwoComplete();
  };
......

And thn just a simple onClick() which switch the state to false and calls cancel animations, which just immediately completes the ongoing promise.

useEffect(() => {
    if (cancelAnim) {
      console.log('cancelAnim from useEffect')
      console.log(cancelAnim)
      if (animationZero) animationZero.cancel();
      if (animationOne) animationOne.cancel();
      .....
    }
  }, [cancelAnim]);

<div
   onClick={() => {
     setCancelAnim(true);
  }}
>
  Cancel
</div>

When I click cancel. The console log from useEffect prints True for cancelAnim. But after that it cancels/completes ongoing await and goes into next function and in that function cancelAnim value remains false.
I have tried different solutions online: converting awaits into then, using a global let variable instead of useState, and passing cancelAnim as a function argument. However, after calling cancelAnim in the callback/await chain, it remains at the initial value regardless of what I assign it to on button press.. Any hints to resolve this issue would be helpful.