[Change Body Background Color on Scroll - ReactJS]

I'm trying to change the background color of the whole body section in react but It doesn't seems to work. I'm getting warning in console like

Invalid property backgroundColor set to #444444 Missing plugin? gsap.registerPlugin() 

Any help would be appreciated.

PS: I'm new to GSAP and also I'm using tailwindcss

 

export default function Home() {
  
  let container = useRef();

  useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);

    gsap.to(container, {
      scrollTrigger: container,
      backgroundColor: "#444444",
    });
  });
  
  // Returning Components
  return (
    <>
      <main ref={container}>
        <HeroSection />
        <Projects />
        <About />
      </main>
    </>
  );
}