Intersection Observer animation not working as expected

Question

so I am building a project and trying to create something like this:

I am using Next.js, and I am not sure how to create these scroll animation with next.js I tried using Intersection Observer and got this:

https://imgur.com/Nel4ruy

The problem is that the animation is really different of what I've done I expect to put the image in the middle, and that when the first one disappears, the second appears, to make that cool animation, but in the one I've done there is a moment where both Images are in the viewport and I don't want that

I don't like what I've done and I am sure there is a way to make it a lot better but I really need some guidance because I do not know how to do that, I've tried framer motion but it didn't work as I expected either

This is the code of what I've tried:

"use client";


import { useRef, useState, useEffect } from "react";


function ScrollAnimationContainer({ children }, props) {
  const containerRef = useRef(null);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const options = { threshold: [0.5, 0.7] }; // Adjust thresholds as needed
    const observer = new IntersectionObserver((entries) => {
      console.log(entries);
      setIsVisible(entries[0].isIntersecting);
    }, options);

    if (containerRef.current) {
      observer.observe(containerRef.current);
    }

    return () => {
      observer.disconnect();
    };
  }, [containerRef]);

  const opacity = isVisible ? 1 : 0; // Animate opacity

  return (
    <div className="mt-10 md:mt-0 flex flex-col justify-center items-center gap-10 px-5 md:flex-row md:min-h-screen">
      <div className="flex flex-col gap-5 flex-1 md:w-1/2" ref={containerRef}>
        <h2 className="text-3xl ">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.{" "}
        </h2>
        <p className="">
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facere ut
          eum corporis id cum amet impedit voluptas animi nemo? Quod reiciendis
          magni at impedit corrupti dolor aut odit nemo veniam.
        </p>
      </div>
      <div
        className="md:w-2/5 sticky top-[20%] object-contain "
        style={{ opacity }}
      >
        {children}
      </div>
    </div>
  );
}

const InfoSection = () => {


  return (
    <section>
      <div className="mx-4">
        <ScrollAnimationContainer>
          <img src="/assets/prueba1.jpg" alt="" />
        </ScrollAnimationContainer>

        <ScrollAnimationContainer>
          <img src="/assets/prueba2.jpg" alt="" />
        </ScrollAnimationContainer>

      </div>
    </section>
  );
};

export default InfoSection;