im trying to implement a smooth scrol feature in my website , but im encountering a problem where its adding some empty space ( as big a a viewport) under teh footer of the page .
when i remove the scmooth scroll container

<SmoothScroll>  </SmoothScroll>

from the landing page the issue dissapears . i just cant seem to pinpoint exactly what the culprit is .

i will provide the code :

const SmoothScroll = ({ children }: { children: React.ReactNode }) => {
  const ref = useRef<HTMLDivElement>(null)
  const { scrollYProgress } = useScroll({ target: ref })
  const smoothScrollY = useSpring(scrollYProgress, {
    stiffness: 100,
    damping: 30,
    restDelta: 0.001
  })

  return (
    <motion.div
      ref={ref}
      style={{ y: useTransform(smoothScrollY, (value) => value * -window.innerHeight) }}
    >
      {children}
    </motion.div>
  )
}

export default function LandingPage() {
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) return null

  return (
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      <div className="min-h-screen w-full bg-background text-foreground">
        <Header />
        <SmoothScroll>
          <Hero />
          <ShuffleHero />
          <Features />
          <Testimonials />
          <Footer />
        </SmoothScroll>
      </div>
    </ThemeProvider>
  )
}