@react-three/fiber not rendering when using react-locomotive-scroll

Question

Im using @react-three/fiber component and am having a issue where it does not show when I use react-locomotive-scroll.

If I remove locomotive-scroll from _app.tsx @react-three/fiber renders.

Also a side-issue of scroll-bar being duplicated when using fiber and locomotive-scroll.

import { useRouter } from 'next/router';
import type { AppProps } from 'next/app';
import { useRef } from 'react';
import { LocomotiveScrollProvider as RLSProvider } from 'react-locomotive-scroll';

import 'locomotive-scroll/dist/locomotive-scroll.css';
import '@styles/globals.scss';

function MyApp({ Component, pageProps }: AppProps) {
  const { asPath } = useRouter();
  const containerRef = useRef(null);
  return (
    <RLSProvider
      options={{
        smooth: true,
        // ... all available Locomotive Scroll instance options
      }}
      watch={
        [
          //..all the dependencies you want to watch to update the scroll.
          //  Basicaly, you would want to watch page/location changes
          //  For exemple, on Next.js you would want to watch properties like `router.asPath` (you may want to add more criterias if the instance should be update on locations with query parameters)
        ]
      }
      location={asPath}
      onLocationChange={(scroll: any) => scroll.scrollTo(0, { duration: 0, disableLerp: true })}
      containerRef={containerRef}
    >
      <div data-scroll-container ref={containerRef}>
        <Component {...pageProps} />
      </div>
    </RLSProvider>
  );
}

export default MyApp;

and the @react-three/fiber component that I am rendering that works without @react-three/fiber this seems to be an issue with different @react-three/fiber examples too.

import * as THREE from "three"
import { useRef, useState} from "react"
import { Canvas, extend, useFrame } from "@react-three/fiber"
import { useTexture, shaderMaterial } from "@react-three/drei"


interface ImageProps {
  scaleY: number;
  scaleX: number;

  cssY?: number | string; 
  cssX?: number | string; 

  image1: string; 
  image2: string; 

  right?: number | string; 
  left?:  number | string;

}


export const ImageFadeMaterial = shaderMaterial(
  {
    effectFactor: 1.2,
    dispFactor: 0,
    tex: undefined,
    tex2: undefined,
    disp: undefined
  },
  ` varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
    }`,
  ` varying vec2 vUv;
    uniform sampler2D tex;
    uniform sampler2D tex2;
    uniform sampler2D disp;
    uniform float _rot;
    uniform float dispFactor;
    uniform float effectFactor;
    void main() {
      vec2 uv = vUv;
      vec4 disp = texture2D(disp, uv);
      vec2 distortedPosition = vec2(uv.x + dispFactor * (disp.r*effectFactor), uv.y);
      vec2 distortedPosition2 = vec2(uv.x - (1.0 - dispFactor) * (disp.r*effectFactor), uv.y);
      vec4 _texture = texture2D(tex, distortedPosition);
      vec4 _texture2 = texture2D(tex2, distortedPosition2);
      vec4 finalTexture = mix(_texture, _texture2, dispFactor);
      gl_FragColor = finalTexture;
      #include <tonemapping_fragment>
      #include <encodings_fragment>
    }`
)

extend({ ImageFadeMaterial })

function FadingImage({ scaleY, scaleX, image1, image2 } : ImageProps) {
  const ref = useRef(null)
  const [texture1, texture2, dispTexture] = useTexture([image1, image2, "/displacement.jpg"])
  const [hovered, setHover] = useState(false)
  useFrame(() => {
    ref.current.dispFactor = THREE.MathUtils.lerp(ref.current.dispFactor, hovered ? 1 : 0, 0.075)
  })
  return (
    <mesh onPointerOver={() => setHover(true)} onPointerOut={() => setHover(false)} scale={[scaleX, scaleY, 1]}>
      <planeGeometry />
      <imageFadeMaterial ref={ref} tex={texture1} tex2={texture2} disp={dispTexture} toneMapped={false} />
    </mesh>
  )
}


const ImageShader = ({ scaleY, scaleX, cssY, cssX, image1, image2, right, left } : ImageProps) => {
  return (
    <div style={{
      height: cssY, 
      width: cssX,

      marginRight: right,
      marginLeft: left,
    }}>
      <Canvas camera={{ position: [0, 0, 2], fov: 50 }}>
        <FadingImage scaleX={scaleX} scaleY={scaleY} image1={image1} image2={image2}/>
      </Canvas>
    </div>
  )
}




export default ImageShader