parallax smooth effect is not working in React using locomotive-scroll

Question

Here I have created a Hoc component like a wrapper of the whole, which is locomotiveScroll. jsx and in app components i have to give the locic of parallex speed of the section,but its not working now i need a coomon wrapper of locomotive scroll components and all components and parallex and smooth scroll should be happen of child so how to do that, is there a better or good approach, you can suggest App components code

import "./styles.css";
import 'locomotive-scroll/src/locomotive-scroll.scss';

import locomotiveScroll from "./locomotiveScroll";
const Component1 = () => {
  return (
    <div style={{ background: "blue", height: "100vh" }}>
      <div data-scroll data-scroll-speed="-8">
        <img
          style={{ height: "300px", width: "300px" }}
          src="https://clipart-library.com/images/RkcM7KXTj.png"
          alt=""
        />
      </div>
      <div style={{ color:'white'}}>
        <h1 data-scroll data-scroll-speed="-4">This is Love container</h1>
      </div>
    </div>
  );
};

const Component2 = () => {
  return (
    <div style={{ background: "red",color:'white', height: "100vh" }} data-scroll data-scroll-speed="0">
      <p>some dummy text bla bla some dummy text bla blasome dummy text bla blasome dummy text bla bla</p>
    </div>
  );
};
const ComponentWithScroll1 = locomotiveScroll(Component1);
const ComponentWithScroll2 = locomotiveScroll(Component2);

export default function App() {
  return (
    <div className="App">
      <ComponentWithScroll1 />
      <ComponentWithScroll2 />
    </div>
  );
}

HOC component code

import React, { useEffect, useRef } from 'react';
import LocomotiveScroll from 'locomotive-scroll';
import 'locomotive-scroll/src/locomotive-scroll.scss';


const locomotiveScroll = (Component) => {
  return (props) => {
    const containerRef = useRef(null);
    const locomotiveScrollRef = useRef(null);

    useEffect(() => {
      locomotiveScrollRef.current = new LocomotiveScroll({
        el: containerRef.current,
        smooth:true,
        multiplier:2
      });

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

    return (
      <div ref={containerRef} className="main-container" data-scroll-container>
        <Component {...props} />
      </div>
    );
  };
};

export default locomotiveScroll;