in react when we clear the file by clicking cross button we are not able to select the same file. How to write the function that after removing existing file if user again want to pick the same file file should not be selected .If you want to select rather than existing file then file should be selected.

  import React from "react";
export default function DropDown() {
const [checked, setChecked] = React.useState(false);
function fun(e)
{
  let file=e.target.files[0];
  localStorage.setItem("selectedFile",file.name);
  if (localStorage.getItem("selectedFile")===file.name) 
  {
    alert('duplicate');
   // document.getElementById("file").value = '';
  //setChecked(false);
  } 
  else 
  {
    alert('not duplicate');
    //setChecked(true);
  }
  console.log(localStorage.selectedFile);
}
return (
    <div >
     <input type="file"  id="file" onChange={(e) => {setChecked(true);fun(e)}} />
    {checked ?<button onClick={(e)=>{setChecked(false);document.getElementById("file").value = '';}}>x</button>:null}
    </div>
  );
}