[useGSAP dependencies does not work on scrollTrigger 'end' property]

hello, 

 

I've been working on react project, The issue is the 'end' property on scrollTigger does not change when the state changes. How can I solve this ? thankyou

 

here is the code:

  useGSAP(

    () => {

      gsap.registerPlugin(ScrollTrigger);

 

      const tl = gsap.timeline({

        scrollTrigger: {

          trigger: '.daily-wrapper',

          scrub: true,

          start: 'bottom 34%',

          end: 'bottom 5%',

          pin: '.info-text',

          markers: {

            startColor: 'purple',

            endColor: 'green',

            fontSize: '2rem',

          },

        },

      });

 

      tl.to('.info-text', {

        x: -400,

        // y: -50,

        duration: 5,

        onComplete: () => {

          // poinRef.current.style.backgroundColor = 'red';

          console.log('finish');

        },

        // onUpdate: () => {

        //   poinRef.current.style.backgroundColor = 'white';

        // },

      });

 

      gsap.to('.daily-wrapper', {

        scrollTrigger: {

          trigger: '.daily-wrapper',

          scrub: true,

          start: '280px 40%',

          end: `${1700 + sizeChange}px 5%`,

          pin: '.info-text',

          markers: {

            startColor: 'blue',

            endColor: 'orange',

            fontSize: '1rem',

          },

        },

      });

    },

    { dependencies: [sizeChange] }

  );