ios – Camera is being cut into half in iPhone Screen but works fine on Android

I am making a react app using typescript. The page should show a camera. It is working fine on PC and on android device. But on iPhone, tested using safari and chrome, the camera is being cut into half, i.e. photo capture is showing only half of the screen than it should be showing.

Code

import { useRef, useState } from "react";
import { Camera, CameraType } from "react-camera-pro";
import { Helmet } from "react-helmet";

function TakePhoto() {
  const cameraRef = useRef<CameraType>(null);
  const [numberOfCameras, setNumberOfCameras] = useState(0);

  return (
    <>
      <Helmet>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Helmet>

      <div className="relative flex flex-col justify-center">
        <div className="flex flex-col items-center gap-y-6 overflow-hidden">
          <div className="relative w-[80%] xl:w-[640px] h-[calc(100vh-350px)] xl:h-[480px]">
            <Camera
              ref={cameraRef}
              aspectRatio="cover"
              numberOfCamerasCallback={(i) => setNumberOfCameras(i)}
              facingMode={"user"}
              errorMessages={{
                noCameraAccessible: "error",
                permissionDenied: "error",
                switchCamera: "error",
                canvas: "error"
              }}
            />

            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[90%] h-[90%]">
              <img src="" alt="" />
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default TakePhoto;