Tengo un formulario que carga archivos y almacena datos y funciona bien y carga archivos al almacenamiento, pero cada vez que trato de obtener una vista previa de la imagen durante la carga, muestra este error después de presionar enviar:

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

por lo que el código de trabajo es el siguiente:

 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" />

el código anterior funciona bien, pero cuando intento implementar la vista previa de la imagen de la siguiente manera:

 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>

la vista previa de la imagen funcionará, pero no puedo enviarla debido al error anterior

¿Qué estoy haciendo mal?