GSAP SplitText Breaking Words Instead of Lines

I am using GSAP’s SplitText utility to animate text by splitting it into lines, but instead of splitting by lines, it is splitting by words. My goal is to animate the h2 text line-by-line, but it seems like SplitText is not detecting the lines properly.

Here is my JavaScript code:

function animateTextF() {
  document.querySelectorAll(".animate-title-body").forEach(parentElement => {
    const h2Element = parentElement.querySelector(".h2-slide");
    const pElements = [...parentElement.querySelectorAll(".fade-in-p")];
    const btnElement = parentElement.querySelector(".button-1") || parentElement.querySelector(".button-2");

    const splitText = new SplitText(h2Element, {
      type: "lines" // Expecting this to split the text into lines
    });

    const timeline = gsap.timeline({
      paused: true
    });

    if (pElements.length > 0 && btnElement) {
      timeline
        .fromTo(splitText.lines, {
          opacity: 0,
          y: '100%'
        }, {
          opacity: 1,
          y: 0,
          duration: 0.7,
          ease: "expo.out",
          stagger: 0.2
        })
        .fromTo(pElements, {
          opacity: 0
        }, {
          opacity: 1,
          duration: 2,
          ease: "sine.in",
          stagger: 0.2
        })
        .fromTo(btnElement, {
          opacity: 0
        }, {
          opacity: 1,
          duration: 1,
          ease: "sine.in"
        }, 0);
    } else if (pElements.length > 0) {
      timeline
        .fromTo(splitText.lines, {
          opacity: 0,
          y: '100%'
        }, {
          opacity: 1,
          y: 0,
          duration: 0.7,
          ease: "expo.out",
          stagger: 0.2
        })
        .fromTo(pElements, {
          opacity: 0
        }, {
          opacity: 1,
          duration: 2,
          ease: "sine.in",
          stagger: 0.2
        });
    } else {
      timeline
        .fromTo(splitText.lines, {
          opacity: 0,
          y: '100%'
        }, {
          opacity: 1,
          y: 0,
          duration: 1,
          ease: "expo.out",
          stagger: 0.2
        });
    }

    ScrollTrigger.create({
      trigger: parentElement,
      start: "top 75%",
      end: "bottom top",
      scrub: true,
      invalidateOnRefresh: true,
      onEnter: () => timeline.play(),
      onEnterBack: () => timeline.play(),
      onLeave: () => timeline.reverse(),
      onLeaveBack: () => timeline.reverse(),
    });
  });
}
animateTextF();
<div class="animate-title-body">
  <h2 class="oversized">
    aurora
  </h2>
  <h3 class="h2-slide">
    A naturally occurring phenomenon crafted into a premium layer of protection.
  </h3>
  <p class="fade-in-p">
    Charged with cosmic greens and blues, the Aurora's carbon shell is left looking raw and rich as you flash over the horizon in a wavelength of colour usually blind to the naked eye.
  </p>
  <a href="{{store direct_url='eox-aurora'}}">
    <div class="button-2">
      <div class="p2">SHOP NOW</div>
    </div>
  </a>
</div>