TypeError: scroll.on is not a function

Question

So I'm trying to make my image go bigger as I scroll down my page. I use NextJS and locomotive-scroll To do this I try to access the progress of my image but I get that error message

Unhandled Runtime Error
TypeError: scroll.on is not a function

Source
src/components/Intro/page.jsx (15:7) @ on

  13 | 
  14 | 
> 15 | scroll.on('scroll', (args)=> {
     |   ^
  16 | if(typeof args.currentElements['Image'] === 'object') {
  17 |     let progress = args.currentElements['Image'].progress;
  18 |     console.log(progress);

Here is my code :

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll();


scroll.on('scroll', (args)=> {
    if(typeof args.currentElements['Image'] === 'object') {
        let progress = args.currentElements['Image'].progress;
        console.log(progress);

    }
});

export default function Intro(){
    return (
        <div className={styles.container} data-scroll-container>
            
            <div className={styles.introImage} data-scroll-section data-scroll data-scroll-scpeed="1" data-scroll-call="function, module">
                <Image 
                src='/images/IMG_1871.jpeg'
                alt="Background image"
                fill={true}
            />
...

I searched the documentation I do precisely what they tell me to do and tried several codes I found nothing worked.