как сделать плавную прокрутку страницы с помощью Locomotive Scroll в next.js(или может другие варианты предложите)

'use client';

import { useEffect } from 'react';
import LocomotiveScroll from 'locomotive-scroll';

const SmoothScroll = () => {
    useEffect(() => {
        if (typeof window !== 'undefined') {
            const scroll = new LocomotiveScroll({
                el: document.querySelector('[data-scroll-container]'),
                smooth: true,
                multiplier: 1,
                // Пример использования offset
                offset: [0, 200], // Первое значение задает смещение по оси X, а второе значение - по оси Y
                getDirection: false,
            });

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

    return null;
};

export default SmoothScroll;

import SmoothScroll from './components/locomotiveScroll/SmoothScroll';
import Discount from './components/main/discount/Discount';
import EightBlockForm from './components/main/eightBlockForm/EightBlockForm';
import FifthBlockPrice from './components/main/fifthBlockPrice/FifthBlockPrice';
import FirstBlock from './components/main/firstBlockHead/FirstBlock';
import Footer from './components/main/footer/Footer';
import FourthBlockMission from './components/main/fourthBlockMission/FourthBlockMission';
import SecondBlockAbout from './components/main/secondBlockAbout/SecondBlockAbout';
import SeventhBlockFAQ from './components/main/seventhBlockFAQ/SeventhBlockFAQ';
import SixthBlockSteps from './components/main/sixthBlockSteps/SixthBlockSteps';
import ThirdBlockProjects from './components/main/thirdBlockProjects/ThirdBlockProjects';

export default function Home() {
    return (
        <main>
            <div data-scroll-container>
                <FirstBlock />
                <SecondBlockAbout />
                <ThirdBlockProjects />
                <FourthBlockMission />
                <FifthBlockPrice />
                <SixthBlockSteps />
                <Discount />
                <SeventhBlockFAQ />
                <EightBlockForm />
                <Footer />
            </div>
            <SmoothScroll />
        </main>
    );
}