My 3D Model turn black inside the Scroll html component from react three drei

Questions
1

Hello guys

I really need your valuable knowledge. I have this general piece of code

export const WormHoleCanvas = () => {
  return (
    <Canvas gl={{ antialias: true }}>
      <ambientLight intensity={30} />
      <ScrollControls pages={2} damping={0.3}>
        <Overlay />
        <Tunnel />
      </ScrollControls>
      <OrbitControls enableZoom={false} />
    </Canvas>
  );
};

------OVERLAY---------------

export const Overlay = () => {
return (
    <Scroll html>
      <div >
        <div >
          <h1 >
            {restOfWords} <span className="text-brandText">{lastWord}</span>
          </h1>
          <p >
            {h("description") ?? ""} 🚀
          </p>
        </div>
        <Image
          src="/dns/logoGrande_cropped.png"
          width={1920}
          height={1080}
          alt="DNS IT LOGO"
          
        />
      </div>

      <div >
        <My3DModel
          content={services}
          ref={childRef as Ref<HTMLDivElement>}
        />
      </div>
    </Scroll>
  );
};

The problem or bug is in the Overlay component, my model turn black inside de Scroll component import form react three drei and also doesn’t work the OrbitControls. I know the problem is that component because when I change the Scroll component to Html component import from react three drei too, my model is working well but now the problem is my scroll events is kind of weird.

I appreciate any help guys or any information, Im stuck with that bug

Take care