So I have a file picker where your able to select and deselect files. The problem is when I deselect an image and reselect the same image it does not appear nor is it selected

where I'm creating the file picker and using it

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>
          )}