title: FirebaseError: Function addDoc() called with invalid data. Unsupported field value: undefined
body: <p>so here I want to store the image URL from the firebase storage in firestore. I am getting an error of undefined as my setImgUrl is undefined. please help me to solve this.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState } from "react";
  import "../mainTab.css";
  import "./addScreen.css";
  
  import firebase, { storage } from "../firebase";
  
  
  const AddScreen = () =&gt; {
    const db = firebase.firestore();
    const [cat, setCat] = useState();
    const [course, setCourse] = useState();
    const [name, setName] = useState();
    const [price, setPrice] = useState();
    const [descrip, setDescrip] = useState();
    const [image, setImage] = useState();
    const [imgURL, setImgURL] = useState();
  
    const onSubmitHandler = (event) =&gt; {
      event.preventDefault();
  
      const ref = storage.ref(`/images/${image.name}`);
      const uploadTask = ref.put(image);
      uploadTask.on("state_changed", console.log, console.error, () =&gt; {
        ref.getDownloadURL().then((url) =&gt; {
          setImage(null);
          setImgURL(url);
          console.log(imgURL);
        });
      });
  
      const data = {
        name: name,
        price: price,
        cat: cat,
        course: course,
        decription: descrip,
        image: imgURL,
      };
  
      db.collection("menu")
        .doc(course.toString())
        .collection(name.toString())
        .add(data)
        .then(() =&gt; alert("menu item is posted"))
        .catch((error) =&gt; alert("error: " + error));
  
      setName("");
      setPrice("");
      setCat("");
      setCourse("");
      setImage("");
      setDescrip("");
    };</code></pre>
  </div>
  </div>
  </p>
  <p>I need the img URL in the setImg hook.
  so is there any way after completing the upload I should call the database writing function(I tries with a flag(false) hook which didn't help?
  by the image get uploaded perfectly fine into the firebase storage</p>