Cara Menampilkan Preview Gambar Hasil Input File di React?

Saya lagi bikin fitur unggah gambar menggunakan input tipe file di React, saya ingin menampilkan fitur preview atau pratinjau yang menampilkan gambar yang telah dipilih sebelum di unggah ke server. Hasil dari input file adalah objek File, bagaimana cara nya agar saya bisa menampilkan gambar tersebut menggunakan tag <img> seperti gambar normal pada umumnya?

Saya sudah mencoba meneruskan objek File ke src tapi gambarnya tidak tampil, seperti ini:

function Gallery() {
  const [file, setFile] = useState<File>();

  return (
    <div>
      <input
        type="file"
        onChange={(e) => {
          const file = e.target.files?.[0];
          if (!file) return;
          setFile(file);
        }}
      />
      <br />
      {file && <img width="100px" src={file} />}
      {/* tidak bisa                    ^  */}
    </div>
  );
}