react-profile image not show

Question

When I select the image the editor opens but does not crop and the image is not visible. I installed react profile .. and did import with css.

import React, { useState } from 'react';
import { openEditor, ReactProfile } from "react-profile";
import "react-profile/themes/dark.min.css";
const File = () => {
  const [dataURL, setDataURL] = useState();
  const open = async (e) => {
    const res = await openEditor(e.target.files[0])
    const image = res.editedImage;
    if(image) {
      const url = image.getDataURL();
      setDataURL(url);
    }
  }
  return (
    <>
    <ReactProfile
    modules={["filter", "crop"]}
    initCrop={{
      unit: "50%",
      width: 5000,
      height: 5000,
      x: 2500,
      y: 2500,}}
    src={dataURL} cropOptions={{ maxWidth: 500, maxHeight: 300 }} />
    <input type="file" id="file" name="file" accept="image/jpeg;image/png" onChange={open} />
    </>
  )
};

export default File;

When I select the image it shows the editor

i want this