Así que tengo un selector de archivos donde puede seleccionar y anular la selección de archivos. El problema es cuando deselecciono una imagen y vuelvo a seleccionar la misma imagen no aparece ni se selecciona

donde estoy creando el selector de archivos y usándolo

src/modals/Tweet.modal.js

 // Opening menu to select file const showOpenFileDialog = () => { imageRef.current.click(); }; // On each change let user have access to a selected file const handleChange = (event) => { const file = event.target.files[0]; if (file) { var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function () { setImage(reader.result); }; reader.onerror = function (error) { console.log(error); }; } }; // other code... {image !== "" && ( <div className="relative"> <div className="absolute top-3 left-3 text-white p-1 rounded-full bg-black transition-color cursor-pointer" onClick={() => { setImage(""); setSelectedFile(null); }} > <CloseOutlinedIcon /> </div> <img src={image} alt="File" className="w-[30rem] mx-auto" /> </div> )}