[GSAP pause issue with React Hooks]

Hello, I need to  pause and unpaused my animation at the same time I changed react state, but when I change react state the animation keeps playing even if I paused it

 const [isPlaying, setIsPlaying] = useState(true);
  
  /* Creatin Bar Refs */
  let bar1 = useRef(null);
  let soundRef = useRef(null);

  //Creating timelines
  const bar1Anim = new TimelineMax({
    paused: false,
  });

  function music() {
    bar1Anim.paused(!bar1Anim.paused());
    if (isPlaying) {
      soundRef.current.play();
      setIsPlaying(!isPlaying);
    } else {
      soundRef.current.pause();
      setIsPlaying(!isPlaying);
    }
  }

  useEffect(() => {
    bar1Anim.to(bar1.current, 0.2, {
      scaleY: "random(0.2,1)",
      ease: "none",
      yoyo: "true",
      repeat: -1,
      repeatRefresh: true,
    });
    bar1Anim.paused(!bar1Anim.paused());

  }, []);

But when Im not changing the react state the animation works at it shoulds,  I would be grateful if someone knows what mistake am I making

 

 

function music() {
    bar1Anim.paused(!bar1Anim.paused());
  }