How to zoom in and zoom out using GSAP in React?

When I scroll down to the section 1 content, it will slowly zoom in to reveal the section 2 content. When I scroll back up and leave the section 2 content, it will return to displaying the section 1 content. If I scroll up again, it will show the same behavior as described earlier.

    import React, { useEffect } from 'react';
    import { gsap } from 'gsap';
    import { ScrollTrigger } from 'gsap/ScrollTrigger';
    
    const SampleZoom () => {
      useEffect(() => {
        // Initialize gsap and ScrollTrigger
        gsap.registerPlugin(ScrollTrigger);
    
        // Get the innerHeight
        const { innerHeight } = window;
    
        // Define the zoom-out animation
        gsap.from("#section1", {
          scale: 2, // Zoom out by scaling down
          opacity: 0, // Make it fade in
          scrollTrigger: {
            trigger: "#zoom-out",
            start: "top top", // Start the animation at the top of the element
            end: `+=${innerHeight * 0.5}`, // End the animation after scrolling down by 50% of the viewport height
            scrub: 1, // Add scrubbing effect
          }
        });
    
        // Define the zoom-in animation
        gsap.to("#section2", {
          scale: 1, // Zoom back in to normal size
          opacity: 1, // Make it fade in
          scrollTrigger: {
            trigger: "#zoom-in",
            start: "top top", // Start the animation at the top of the element
            end: `+=${innerHeight * 0.5}`, // End the animation after scrolling down by 50% of the viewport height
            scrub: 1, // Add scrubbing effect
          }
        });
      }, []);
    
      return (
        <div>
          <div id="section1">
           <h2>ROBO</h2>
          </div>
          <div id="section2">
            Hello world. I am Chitti, The Robot .. Speed 1 THz .. Memory 1 zettabyte. I'll be back. Get ready folks!"
The most expensive movie made in India till date has finally released and has already broken all box office records. Enthiran! This is the same movie that was originally supposed to start in 1998 with Kamal Hassan playing the lead role, then with vikram in the early 2000 and went on to cast Shah Rukh Khan a couple of years back and finally released with Rajnikanth playing the lead role. I managed to watch the movie a week into its release and like a farewell note sent by an IT/ITES employee, I have mixed feeling.
          </div>
        </div>
      );
    };
    
    export default SampleZoom;

Please refer to the below link; it contains exactly what I need for my requirement.

my requirement video

I have tried several methods, but I have been unable to find a solution to this problem. Please help me. Thanks in advance.

from How to zoom in and zoom out using GSAP in React?