how to use locomotive scroll at each component in nextjs 13?

Question

I am making homepage for myself with nextjs 13 and locomotive scroll. but, there's some problem. [locomotive version: Locomotive Scroll v5 ]

I wonder how to use locomotive scroll callback in different component of same page.

this is my code of [components/MainService.js]

'use client'
import { useEffect, useState } from 'react';

const MainService = () => {    
      
  function onScroll2({ scroll, limit, velocity, direction, progress }) {
      console.log('service callback');
  }

  useEffect(() => {    

    (async() => {
        const LocomotiveScroll = (await import('locomotive-scroll')).default;
        const locomotiveScroll =  new LocomotiveScroll({              
          scrollCallback: onScroll2,
        });
    })()
    
  }, []);    

  return (
    <div className='main_service_area py-20 lg:py-24 transition-all duration-1000' data-scroll data-scroll-repeat>
      <div className='mmn_layout_inner'>            
          <h2 className='mmn_section_xl_t text-white'>SERVICE</h2>           
        <div className='service_contents' style={{height: '900px'}}>
          service contents..
        </div>
      </div>
      
    </div>
  )
}

export default MainService

and, next is anoter component [components/MainAbout.js] in same page

'use client'

import { useEffect, useState } from 'react';
import ReactPlayer from 'react-player'

function MainAbout() {
  const [isWindow, setIsWindow] = useState(false);

  useEffect(() => {
    setIsWindow(true);

    function onScroll({ scroll, limit, velocity, direction, progress }) {
      console.log('about callback');
  }

    (async() => {
        const LocomotiveScroll = (await import('locomotive-scroll')).default;
        const locomotiveScroll =  new LocomotiveScroll({              
          scrollCallback: onScroll,
        });    
               
    })()
    
  }, []);


  return (
    <>
    <div className='mmn_layout_inner main_about_texts'>
      <h2 className='mmn_section_t text-center break-keep'>About</h2>
     
    </div>
    <div className='main_about_video mt-16 lg:mt-40 relative'  data-scroll
          data-scroll-event-progress='progressEvent' data-scroll-position='start,start' data-scroll-offset='20%,20%'>
      <div className='main_video_cover video_cover_left absolute w-1/2 h-[102%] top-0 left-0 bg-white z-10 origin-left' id='coverProgress'></div>
      <div className='main_video_cover video_cover_left absolute w-1/2 h-[102%] top-0 right-0 bg-white z-10 origin-right'></div>

      {
        isWindow && (
          <div className='mmn_layout_inner'>
            <ReactPlayer
            className='main_about_video_inner'
            url='https://www.youtube.com/watch?v=w5nEf-HahZM'
            width={1200}
            height={800}
            controls={false}
            muted={true}
            loop={true}
            playing={true}
          />
          </div>
          
        )
      }      

    </div>    

    </>
    
  )
}

export default MainAbout

In short, Multiple components are used within the same page, and each of these components imports and defines locomotive scroll. At this time, it is not a callback function that operates on all components, I want a callback function that only works on a specific component. In other words, I want a callback function that operates only in a specific component area, not in all scroll areas. Can you give me some advice?