NextJs useGSAP Hydration Failed

[epenflow]

I'm encountering hydration errors when using useGSAP on my NextJs Pages. Whenever i try to use useGSAP on a page, I get a hydration error

"use client";
import { useGSAP } from "@/config/gsap";
import React from "react";
import "./base.css";

const Page = () => {
	const containerRef = React.useRef<HTMLElement | null>(null);

	useGSAP(() => {}, { scope: containerRef });

	return (
		<main ref={containerRef}>
			<section className="section h-svh w-full border border-red-500 relative">
				<div className="w-1/2 h-1/2 bg-red-500 right-0 absolute trigger" />
			</section>
			<section className="h-svh w-full border border-red-500 relative">
				<div data-step className="w-1/2 h-1/2 " />
			</section>
			<section className="h-svh w-full border border-red-500 relative">
				<div data-step className="w-40 h-40" />
			</section>
		</main>
	);
};

export default Page;

[jackdoyle]

I believe this has been answered here:
https://gsap.com/community/forums/topic/43281-hydration-error-in-nextjs-15/

[epenflow]

The issue likely doesn't stem from ScrollTrigger itself. Instead, it appears related to typeof window !== "undefined" check. This check is commonly used to differentiate between server side and client side. However, during react hydration process, this conditional check can result in mismatched. To address this, add suppressHydrationWarning to the body tag to suppress hydration warnings.

https://react.dev/reference/react-dom/client/hydrateRoot