How do I upload a file to firebase storage with the onDrop method in react?

  const [imageUpload, setImageUpload] = useState(null);
  const [imageUrls, setImageUrls] = useState([]);

  const imagesListRef = ref(storage, "images/");
  const uploadFile = () => {
    if (imageUpload == null) return;
    const imageRef = ref(storage, `images/${imageUpload.name + v4()}`);
    uploadBytes(imageRef, imageUpload).then((snapshot) => {
      getDownloadURL(snapshot.ref).then((url) => {
        setImageUrls((prev) => [...prev, url]);
      });
    });
  };
return (
    <div  
    onDragOver={(e)=> {
        e.preventDefault();
    }}
    onDrop={(e) => {
        uploadFile();
        console.log(e.dataTransfer.files);
        console.log(e);
    }}>
      <input
        type="file"
        onChange={(event) => {
          setImageUpload(event.target.files[0]);
        }}
      />
      <button > Upload Image</button>

    </div>
  );
}

I'm able to console log the file info so I know the file is dropping successfully, but it isn't getting sent to the firebase storage I've installed all of the dependencies so i can't imagine thats an issue.