Reactjs:How to display image

In my project, using input field to add and update images.

import React, { useState } from "react";
import ReactCrop from "react-image-crop";
import "react-image-crop/dist/ReactCrop.css";

export const Imagecrop = () => {
  const [src, setSrc] = useState(null);
  const handleFileChange = (e) => {
    console.log(e.target.files[0]);
    setSrc(URL.createObjectURL(e.target.files[0]));
    console.log("src", src);
  };
  const [image, setImage] = useState(null);
  const [crop, setCrop] = useState({ aspect: 16 / 9 });

  return (
    <div className="container">
      <div className="row">
        <div className="col-6">
          <input type="file" accept="image/*" onChange={handleFileChange} />
        </div>
        <div className="col-6">
          {src && (
            <ReactCrop
              src={src}
              onImageLoded={setImage}
              crop={crop}
              onChange={setCrop}
            />
          )}
        </div>
      </div>
    </div>
  );
};

There are no errors.

I want to show the selected image to the second column but the file name is getting displayed here. Please give me some suggestions to fix this problem and the codesandbox link: https://codesandbox.io/s/polished-snow-fb61he?file=/src/imagecrop.js