Basic pin GSAP ScrollTrigger

Question

explain to me how to use ScrollTrigger correctly

I just want to do simple pin the text.

The problem is, when it reach the scroll-start mark, the text goes down. I don't understand how this thing works

I tried playing with the start and end, still not working

import { useRef, useEffect } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

export default function Home() {
  const text = useRef();
  const container = useRef();

  useEffect(() => {
    ScrollTrigger.create({
      trigger: container.current,
      pin: text.current,
      markers: true,
      start: '-=100',
      end: '+=500'
    });
  }, []);

  return (
    <section className="h-[3000px]">
      <div className="bg-teal-200 h-20 mt-[40em]" ref={container}>
        <p ref={text} className="ml-20">Cibai</p>
      </div>
    </section>
  );
}

I just want to do simple pin with ScrollTrigger. When start mark reach scroller-start the text goes down instantly. I just want to text to stop where start mark reach scroller-start