React Easy Crop image leaving space from all sides

Question

I'm using react-easy-crop for my project to add an image cropper to my website. However, the cropper is leaving some space from all sides of the image. I've tried to change the aspect ratio and the crop size, but the problem persists. my problem

code

import { Dialog, Transition } from "@headlessui/react";
import { Fragment, useEffect, useState } from "react";
import Cropper from "react-easy-crop";
import { generateDownload } from "../utils/cropImage";
import imageCompression from "browser-image-compression";

export default function ImageCropper({
  image,
  setImage,
  data,
  setData,
  filedName = "avatar",
  aspect = 1,
  setImageFlag,
}) {
  const [isOpen, setIsOpen] = useState(false);
  const [zoom, setZoom] = useState(1);
  const [crop, setCrop] = useState({ x: 0, y: 0 });
  const [croppedArea, setCroppedArea] = useState(null);
  const [loading, setLoading] = useState(false);

  function closeModal() {
    setIsOpen(false);
  }

  function openModal() {
    setIsOpen(true);
  }

  useEffect(() => {
    if (image !== null) {
      openModal();
    }
  }, [image]);

  const onCropChange = (crop) => {
    setCrop(crop);
  };

  const onZoomChange = (zoom) => {
    setZoom(zoom);
  };

  const onCropComplete = (croppedAreaPercentage, croppedAreaPixels) => {
    setCroppedArea(croppedAreaPixels);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    const options = {
      maxSizeMB: 1,
      maxWidthOrHeight: 1920,
      useWebWorker: true,
    };
    try {
      const croppedImage = await generateDownload(image, croppedArea);
      try {
        const compressedFile = await imageCompression(croppedImage, options);
        setData({ ...data, [filedName]: compressedFile });
        setImageFlag(true);
        setLoading(false);
      } catch (error) {
        setData({ ...data, [filedName]: croppedImage });
        setImageFlag(true);
        setLoading(false);
      }
    } catch (error) {
      console.log(error);
    }

    closeModal();
  };

  return (
    <>
      <Transition appear show={isOpen} as={Fragment}>
        <Dialog as="div" className="relative z-10" onClose={closeModal}>
          <Transition.Child
            as={Fragment}
            enter="ease-out duration-300"
            enterFrom="opacity-0"
            enterTo="opacity-100"
            leave="ease-in duration-200"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <div className="fixed inset-0 bg-black bg-opacity-25" />
          </Transition.Child>

          <div className="fixed inset-0 overflow-y-auto">
            <div className="grid place-items-center min-h-full  p-4 text-center">
              <Transition.Child
                as={Fragment}
                enter="ease-out duration-300"
                enterFrom="opacity-0 scale-95"
                enterTo="opacity-100 scale-100"
                leave="ease-in duration-200"
                leaveFrom="opacity-100 scale-100"
                leaveTo="opacity-0 scale-95"
              >
                <Dialog.Panel className="w-[50vw] ml-20 h-[34rem] transform rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
                  <Dialog.Title
                    as="h3"
                    className="text-lg font-medium leading-6 text-gray-900"
                  >
                    Crop Image
                  </Dialog.Title>
                  <div className="w-full flex flex-col gap-12">
                    <div className="relative w-[95%] top-5 left-5 h-96 bg-slate-400 rounded-md">
                      <Cropper
                        image={image}
                        zoom={zoom}
                        crop={crop}
                        aspect={aspect}
                        onZoomChange={onZoomChange}
                        onCropChange={onCropChange}
                        onCropComplete={onCropComplete}
                      />
                    </div>
                    <div className="w-full">
                      <form
                        className="mx-5 items-center"
                        onSubmit={handleSubmit}
                      >
                        <div className=" w-full h-full flex flex-row items-center justify-end gap-5 font-bold">
                          <button
                            type="reset"
                            className="text-sm font-semibold leading-6 text-gray-900"
                            onClick={() => {
                              setImage(null);
                              closeModal();
                            }}
                          >
                            Cancel
                          </button>
                          <button
                            type="submit"
                            disabled={loading}
                            className={
                              "rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                            }
                          >
                            {loading ? "uploading..." : "Submit"}
                          </button>
                        </div>
                      </form>
                    </div>
                  </div>
                </Dialog.Panel>
              </Transition.Child>
            </div>
          </div>
        </Dialog>
      </Transition>
    </>
  );
}

i want this to work like this enter image description here