Doesn't scroll over 3d model on mobile

Questions
1

im rendering model inside right3dwrapper div . when im scroll my page in mobile devices it doesnt scroll anymore when i reach this 3d model div! how can i fix this any guidence appriciated. :melting_face:

import "./Tophero.css";
import { Suspense, useEffect, useRef, useState } from "react";
import { OrbitControls } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import Phone from "../../../public/Phone";
import LoadingSpinner from "./LoadingSpinner";
import { useThemeContext } from "../../context/Themecontext";

import gsap from "gsap";
import { useGSAP } from "@gsap/react";

const Tophero = () => {
  const { isLightMode, toggleLightMode } = useThemeContext();

  const textSpanRef = useRef(null);
  const phoneRef = useRef(null);

  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    const loadModel = async () => {
      await new Promise((resolve) => setTimeout(resolve, 1000));

      setIsLoaded(true);
    };
    loadModel();
  }, []);

  useGSAP(() => {
    gsap.from(textSpanRef.current, {
      opacity: 0,
      x: -50,
      duration: 1,
      delay: 0.5,
      ease: "elasticin ",
    });

    gsap.to(textSpanRef.current, {
      duration: 2,
      ease: "elastic.out(1, 0.5)",
    });
  });

  return (
    <>
      <div className="topheromain" id={isLightMode}>
        <div className="topherocontainer">
          <div className="topherowrapper">
            <div className="lefttextwrapper">
              <div className="textwrapper">
                <h1 className="textheadingwrapper">
                  <span ref={textSpanRef} className="textspan">
                    Srilanka Best
                  </span>
                  <br />
                  Apple Service center
                </h1>
                <p className="paragraphwrapper">
                  Get top-notch iPhone and MacBook repairs in Sri Lanka. Our
                  expert technicians specialize in fixing Apple devices with
                  precision and speed. Trust us for reliable and efficient
                  iPhone and MacBook repairs in Sri Lanka.
                </p>
                <div className="contactwrapper">
                  <a className="contactwrapperlink" href="/contact">
                    Contact Us
                    <span className="contactspan">
                      <svg
                        width="24"
                        height="24"
                        viewBox="0 0 24 24"
                        fill="currentcolor"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M5.08298 11.7457C5.94804 13.1708 7.02544 14.5303 8.24816 15.7521C9.46981 16.9746 10.8292 18.0523 12.254 18.9174L15.8319 15.0788L22.75 19.0189C21.7459 20.8831 19.3379 23.2672 16.2785 22.6508C14.8327 22.3591 13.4059 21.8729 11.6806 20.8831C9.94403 19.8868 8.30439 18.6143 6.84762 17.1565C5.38978 15.6997 4.11324 14.056 3.11692 12.3194C2.12706 10.5941 1.64092 9.16735 1.34916 7.72156C0.732841 4.66214 3.11692 2.25408 4.98109 1.25L8.92117 8.16817L5.08298 11.7457Z"
                          fill="currentcolor"
                        />
                        <path
                          fill-rule="evenodd"
                          clip-rule="evenodd"
                          d="M18.5858 5.00008L17.2929 3.70718L18.7071 2.29297L22.4142 6.00008L18.7071 9.70718L17.2929 8.29297L18.5858 7.00008L13 7.00008V5.00008L18.5858 5.00008Z"
                          fill="currentcolor"
                        />
                      </svg>
                    </span>
                    <span className="lastspan"></span>
                  </a>
                </div>
              </div>
            </div>
            <div className="right3dwrapper">
              <div className="rightcontainer">
                <Canvas>
                  <ambientLight />
                  <OrbitControls />
                  <Suspense>
                    {isLoaded ? <Phone /> : <LoadingSpinner />}
                  </Suspense>
                </Canvas>
              </div>
            </div>
          </div>
        </div>
      </div>
      <hr className="topherodivider" />
    </>
  );
};

export default Tophero;