视差平滑效果在 React 中使用 locomotive-scroll 不起作用

问：

在这里，我创建了一个 Hoc 组件，就像整体的包装器一样，这就是 locomotiveScroll。jsx 和在应用程序组件中，我必须给出该部分的视差速度的位置，但它现在不起作用，我需要机车涡旋组件的库蒙包装器，所有组件以及视差和平滑滚动应该发生在孩子身上，那么该怎么做，有没有更好或好的方法， 你可以建议 应用组件代码

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 组件代码

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;