[gsap.utils.selector() not working properly]

Hello, I'm new to GSAP. I was trying scrolltrigger in a NextJS project but I noticed that 

gsap.utils.selector(someRef)

...
  useEffect(() => {

    gsap.to(someRef('.s1'), {
      duration: 1,
      x: 800,
      scrollTrigger: someRef('.s2'),
    });
  });
...

not working as it should (I guess). Here is the code I was working on. If I use the gsap.utils.selector() then the animation of .s1 is triggering whenever the .s1 is coming inside the viewport but if I use this then the animation of .s1 is triggering when .s2 comes into the viewport as it should. Please help.

gsap.utils.selector(someRef)

...
  useEffect(() => {

    gsap.to('.s1', {
      duration: 1,
      x: 800,
      scrollTrigger: '.s2',
    });
  });
...

Here is the original code that I was working on

import gsap from 'gsap';
import ScrollTrigger from 'gsap/dist/ScrollTrigger';
import React, { useEffect, useRef } from 'react';
gsap.registerPlugin(ScrollTrigger);

export default function Home() {
  const containerRef = useRef();
  const container = gsap.utils.selector(containerRef);
  const test = useRef();

  useEffect(() => {

    gsap.to(container('.s1'), {
      duration: 1,
      x: 800,
      scrollTrigger: container('.s2'),
    });
  });

  return (
    <>
      <div ref={containerRef} className='container-wrapper'>
        <div className='hero section'></div>
        <div className='about section'>
          <div className='s1'></div>
          <div className='s2'></div>
        </div>
        <div className='skills section'></div>
      </div>

      <style jsx>{`
        .section {
          height: 100vh;
          width: 100%;
        }

        .hero {
          background-color: red;
        }

        .about {
          background-color: green;
        }

        .skills {
          background-color: blue;
        }

        .s1 {
          width: 200px;
          height: 200px;
          background-color: white;
        }

        .s2 {
          margin-top: 400px;
          width: 200px;
          height: 200px;
          background-color: black;
        }
      `}</style>
    </>
  );
}