How to Implement Smooth Scroll in Next.js App Router using Lenis Scroll

Question

I've been trying to implement smooth scrolling in my Next.js application using the new App Router using the lenis scroll package, but I'm having challenges making it work

Here's what I'm trying to do:

Enable smooth scrolling on my home page I am using Next.js 14 with the new App Router.

I run the

npm i lenis

command then used the code below

'use client';

import { useEffect, useRef } from 'react';
import Lenis from '@studio-freight/lenis';
import Hero from '@/components/Hero';
import SecondSection from '@/components/sections/second/SecondSection';
import ThirdSection from '@/components/sections/ThirdSection';
import FourthSection from '@/components/sections/FourthSection';
import FifthSection from '@/components/sections/FifthSection';
import SixthSection from '@/components/sections/SixthSection';
import SeventhSection from '@/components/sections/SeventhSection';
import SliderComponent from '@/components/slider/slider';
import EighthSection from '@/components/sections/EighthSection';
import Packages from '@/components/sections/Packages';
import HorizontalScroll from '@/components/HorizontalScroll';
import FinestExperience from '@/components/sections/FinestExperience';
import TenthSection from '@/components/sections/TenthSection';
import GreatAdventure from '@/components/sections/GreatAdventure';
import Carousel from '@/components/horizontalSlider/HorizontalSlider';
import './globals.css';

function Home() {
  const lenisRef = useRef(null);

  useEffect(() => {
    const lenis = new Lenis({
      duration: 1.2,
      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
    });

    lenisRef.current = lenis;

    function raf(time) {
      lenis.raf(time);
      requestAnimationFrame(raf);
    }
    requestAnimationFrame(raf);

    return () => {
      lenis.destroy();
    };
  }, []);

  return (
    <div ref={lenisRef} className="smooth-scroll">
      <main className="flex min-h-screen flex-col">
        <Hero />
        <SecondSection />
        <GreatAdventure />
        <ThirdSection />
        <FourthSection />
        <FifthSection />
        <SixthSection />
        <HorizontalScroll />
        <Carousel />
        <Packages />
        <SeventhSection />
        <EighthSection />
        <FinestExperience />
        <TenthSection />
      </main>
    </div>
  );
}

export default Home;