I have a function that calls 2 functions, one uploads an image and stores it in some directory, and the other send product related data to edit/store in the database:

  const uploadImage = async () => {
    let formData = new FormData();
    formData.append("image", product.image);

    const res = await fetch("http://localhost:8000/api/upload", {
      method: "POST",
      body: formData,
    });
    const data = await res.json();
    setProduct({...product,path: data.data.path});
  };

  const saveProduct = async () => {

    if (product.id) {
      await fetch("http://localhost:8000/api/edit-product", {
        method: "PUT",
        body: JSON.stringify(product),
        headers: { "Content-Type": "application/json" },
      });

    } else {
      fetch("http://localhost:8000/api/new-product", {
        method: "POST",
        body: JSON.stringify(product),
        headers: { "Content-Type": "application/json" },
      })
    }

  };

  const saveProductMain = () => {
    uploadImage();
    saveProduct();

  };

when saveProductMain is called, it will call uploadImage which gets a response for the uploaded image path, and then sets the state product.path, now i want to send that path to /new-product so i can recieve the path in the route method and then store it in the database, but when i console.log the state product.path in saveProduct function, it will return the value only the second time the function is called, the first time it returns null, so product.path is null when its sent in the fetch body, how can i solve that issue ?