locomotive scroll - impossible to scroll need to resize window before

Question

I have an issue on my project, I have a page with full image displayed with the library Locomotive scroll, but to scroll the page, I need to resize him before.. How can I fix that to avoid to resize my window before in order to scroll the page I use the version 4.1.0 of Locomotive Scroll, it is the last at this moment.

You can see the issue in this link: website demo

My code is below:

class Distrame extends Component {

componentDidMount() {
    gsap.registerPlugin(ScrollTrigger);

    // Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll

    this.scroll = new LocomotiveScroll({
        el: document.querySelector(".smooth"),
        smooth: true
    });
}

componentWillUnmount() {
    this.scroll.destroy()
}

render() {
    return (
        <div>
            <div className="wrapper smooth">

                <div data-scroll-container>
                    <div data-scroll-section>
                        <div className="container_1_bloc" data-scroll data-scroll-speed="1">
                            <img className="container_1 z-out" src={require("../img/distrame11.JPG")} alt="Distrame capteur details" />
                        </div>

                        <div className="block_image_flex bloc_1">
                            <div className="c-speed-block" data-scroll data-scroll-speed="3" >
                                <img className="z-out" src={require("../img/distrame5.JPG")} alt="Distrame type zone" />
                            </div>
                            <div className="c-speed-block" data-scroll data-scroll-speed="-1" >
                                <img className="z-out" src={require("../img/distrame6.JPG")} alt="Distrame alerte" />
                            </div>
                            <div className="c-speed-block" data-scroll data-scroll-speed="3" >
                                <img className="z-out" src={require("../img/distrame7.JPG")} alt="Distrame batterie" />
                            </div>


                        </div>

                    </div>

                </div>

                <div data-scroll-section>
                    <div className="block_image_flex bloc_2" data-scroll data-scroll-speed="4" >
                        <div className="item_bloc_2">
                            <img className="z-out" src={require("../img/distrame8.JPG")} alt="Distrame map affichage" />
                        </div>
                        <div className="item_bloc_2" >
                            <img className="z-out" src={require("../img/distrame9.JPG")} alt="Distrame zone affichage" />
                        </div>
                    </div>
                </div>


                <div data-scroll-section>
                    <div className="container_2_bloc bloc_3" data-scroll data-scroll-speed="1" >
                        <img className="container_2 z-out" src={require("../img/distrame4.JPG")} alt="Distrame affichage" />
                    </div>
                </div>
            </div>
        </div>
    );
}

}