Upload to firebase: TypeError: uploadTask.on is not a function

问题

I am doing a react POC for upload image to firebase. I have followed the firebase documentation

Also referred to this blog post from dev.to

react version: "^16.13.1", firebase version: "^7.15.5",

For uploadTask.on(), I tried two approaches.

put everything inside it as it is ie. not using next, error and complete keywords.
put the code separately into each one of them and pass them inside uploadTask.on()

I am getting the error: TypeError: uploadTask.on is not a function

I have referred the documentation many times now, but sure where I am going wrong.

imageUpload component code

import { storage } from "../firebase/index";


const ImageUpload = () => {
  const initImgState = { imgUrl: "" };
  const [imgAsFile, setImgAsFile] = useState("");
  const [imgAsUrl, setImgAsUrl] = useState(initImgState);
  const [progress, setProgess] = useState(0);

  const handleImgAsFile = (e) => {
    console.log("triggering handle image as file");
    const image = e.target.files[0];
    setImgAsFile((imgFile) => image);
  };

  const next = (snapShot) => {
    // takes the snapShot of each step of the process
    console.log(snapShot);
    const progress = Math.round(
      (snapShot.bytesTransferred / snapShot.totalBytes) * 100
    );
    setProgess(progress);
  };
  // error handling
  const error = (error) => {
    //catches the errors
    console.log(error);
  };
  const complete = () => {
    // gets the functions from storage refences the image storage in firebase by the children
    // gets the download url then sets the image from firebase as the value for the imgUrl key:
    storage
      .ref("images")
      .child(imgAsFile.name)
      .getDownloadURL()
      .then((fireBaseUrl) => {
        setImgAsUrl((prevObject) => ({
          ...prevObject,
          imgUrl: fireBaseUrl,
        }));
      });
  };

  const handleCloudUpload = (e) => {
    console.log("triggering handle upload");
    e.preventDefault();
    console.log("starting to upload");
    // checkin if the file is an image
    if (imgAsFile === "") {
      console.error(`not an image, the image file is a ${typeof imgAsFile}`);
      return <p>`not an image, the image file is a ${typeof imgAsFile}`</p>;
    }
    const uploadTask = () =>
      storage.ref(`/images/${imgAsFile.name}`).put(imgAsFile);
    // initiates upload to cloudserver ie firebase
    uploadTask.on(storage.TaskEvent.STATE_CHANGED, {
      next: next,
      error: error,
      complete: complete,
    });
  };
  return (
    <Fragment>
      <Form onSubmit={handleCloudUpload}>
        <Form.Group role="form">
          <ProgressBar animated now={progress} max="100" />
          <Form.File id="exampleFormControlFile1" onChange={handleImgAsFile} />
          <Button variant="outline-primary" type="submit">
            Upload File into Firbase
          </Button>
        </Form.Group>
      </Form>
      <p>Preview</p>
      <Image
        src={imgAsUrl.imgUrl || "http://via.placeholder.com/1024x1024"}
        fluid
      />
    </Fragment>
  );
};

firebase initialize code

import firebase from "firebase/app";
import "firebase/storage";

const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "react-image-upload-and-c-bbd0f.firebaseapp.com",
  databaseURL: "https://react-image-upload-and-c-bbd0f.firebaseio.com",
  projectId: "react-image-upload-and-c-bbd0f",
  storageBucket: "react-image-upload-and-c-bbd0f.appspot.com",
  messagingSenderId: "73677178427",
  appId: "1:73677178427:web:149704e87714eff275fe1e",
  measurementId: "G-89WQ7XLYQK",
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();

const storage = firebase.storage();

export { storage, firebase as default };