i have a form that upload files and store data and its working fine and upload files to storage but whenever i try to preview the image during upload it show this error after i press submit:

error - unhandledRejection: TypeError: Cannot read properties of undefined (reading 'path')

so the working code is as follow:

const state = {
selectedFile5: null,
};

function fileUploadHandler5(event) {
state.selectedFile5 = event.target.files[0];
}

const sendFileToServer = async (file5) => {
const formData = new FormData();
formData.append( "file5",file5);
...
<input name="file5" onChange={fileUploadHandler5} type="file" className="custom-file-input" id="shop-logo" />

the above code is working fine but when i try to implement the image preview as follow:

const [selectedImage, setSelectedImage] = useState();
function fileUploadHandler5(event) {
state.selectedFile5 = event.target.files[0];
setSelectedImage(state.selectedFile5);
}

const removeSelectedImage = () => {
setSelectedImage();
};
...
<Col xs="12" sm="6" className="pt-3">
      {selectedImage && (
      <div>
        <img
          src={URL.createObjectURL(selectedImage)}
          alt="Thumb"
        />
        <button onClick={removeSelectedImage}>
          Remove This Image
        </button>
      </div>
    )}
      </Col>
      <Col xs="12" sm="6" className="pt-3">
        <label for="shop-logo">Shop Logo</label>
        <div className="custom-file">
          <input name="file5" onChange={fileUploadHandler5} type="file" className="custom-file-input" id="shop-logo" />
          <label className="custom-file-label" for="shop-logo">
            Choose file
          </label>
        </div>
      </Col>

the image preview will work but i can't submit because of the error above

what am i doing wrong?