Firebase storage reading twice

Question

i am stuck at this point leaving me to ask this question here : my firebase storage API triggers twice for some reasons here is my app js

import "./App.css";
import { useEffect, useState } from "react";
import { storage } from "./firebase";
import {
  ref,
  getDownloadURL,
  uploadBytesResumable,
  listAll,
} from "firebase/storage";

function App() {
  const [imgUrl, setImgUrl] = useState(null);
  const [progresspercent, setProgresspercent] = useState(0);
  const imagesListRef = ref(storage, "images/");
  const [imageUrls, setImageUrls] = useState([]);
  const handleSubmit = (e) => {
    e.preventDefault();
    const file = e.target[0]?.files[0];
    if (!file) return;
    const storageRef = ref(storage, `images/${file.name}`);
    const uploadTask = uploadBytesResumable(storageRef, file);

    uploadTask.on(
      "state_changed",
      (snapshot) => {
        const progress = Math.round(
          (snapshot.bytesTransferred / snapshot.totalBytes) * 100
        );
        setProgresspercent(progress);
      },
      (error) => {
        alert(error);
      },
      () => {
        getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
          setImgUrl(downloadURL);
        });
      }
    );
  };
  useEffect(() => {
    listAll(imagesListRef).then((response) => {
      response.items.forEach((item) => {
        getDownloadURL(item).then((url) => {
          setImageUrls((prev) => [...prev, url]);
        });
      });
    });
  }, []);

  return (
    <div className="App">
      <form onSubmit={handleSubmit} className="form">
        <input type="file" />
        <button type="submit">Upload</button>
      </form>
      {!imgUrl && (
        <div className="outerbar">
          <div className="innerbar" style={{ width: `${progresspercent}%` }}>
            {progresspercent}%
          </div>
        </div>
      )}
      {imgUrl && <img src={imgUrl} alt="uploaded file" height={200} />}
      {imageUrls.map((url) => {
        return <img src={url} />;
      })}
    </div>
  );
}
export default App;

and here is my firebase.js :

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";
const firebaseConfig = {
  apiKey: "AIzaSyAG9YvHxwKIr3FdL58KNkAGWUPVOFoNfn8",
  authDomain: "leaning-firebase1888.firebaseapp.com",
  projectId: "leaning-firebase1888",
  storageBucket: "leaning-firebase1888.appspot.com",
  messagingSenderId: "1075477563305",
  appId: "1:1075477563305:web:41b79ff97684d4e67d26b8",
};

export const app = initializeApp(firebaseConfig);
export const storage = getStorage(app);

i read a answer on stackoverflow but did not understand please help what am i doing wrong here ???