reactjs – iOS PWA – getUserMedia Digital camera not displaying

So Once I take away this alerts from code, it would not show digicam on the primary attempt, if I depart alerts like this and person clicks “Okay” on alert video on iOS, stream shows. I need to know the way to repair this so stream is displayed immediately when somebody clicks this “allow digicam” ingredient. Stack overflow says my put up is generally code and I want so as to add extra particulars however I do not know what to say.

export default perform CreatePage() {
  const [isEnabled, setIsEnabled] = useState<boolean>(true);
  const [stream, setStream] = useState<MediaStream | null>(null);
  const videoElement = useRef<HTMLVideoElement | null>(null);
  const isPWA = useSelector(selectPwaStatus);
  useEffect(() => {
    const checkCameraStatus = async () => {
      const isAllowed = await useCameraAllowed();
      if (isAllowed) {
        const reside = await getStream();
        setIsEnabled(true);
        setStream(reside);
      } else {
        setIsEnabled(false);
      }
    };
    checkCameraStatus();
  }, []);

  const getStream = async (): Promise<MediaStream | null> => {
    whereas (true) {
      attempt {
        const environmentStream = await navigator.mediaDevices.getUserMedia({
          video: {
            facingMode: "atmosphere",
          },
        });
        if (isPWA) {
          alert("Digital camera Enabled, Click on Near proceed");
        }

        return environmentStream;
      } catch (environmentError) {
        attempt {
          const userStream = await navigator.mediaDevices.getUserMedia({
            video: {
              facingMode: "person",
            },
          });
          if (isPWA) {
            alert("Digital camera Enabled, Click on Near proceed");
          }
          return userStream;
        } catch (userError) {}
      }
    }
  };

  const enableCamera = async () => {
    const reside = await getStream();
    if (reside) {
      setIsEnabled(true);
    }
    setStream(reside);
  };

  useEffect(() => {
    if (stream) {
      if (videoElement.present) {
        videoElement.present.srcObject = stream;
      }
    }
  }, [stream]);

  return (
    <Wrapper>
      <VideoWrapper>
        <Video ref={videoElement} autoPlay playsInline muted />
      </VideoWrapper>
      <UI_Wrapper>{!isEnabled && <CenteredText onClick={enableCamera}>Faucet to allow digicam</CenteredText>}</UI_Wrapper>
    </Wrapper>
  );
}