I'm trying to upload a new image in my react app, but when I send the request, the result is this error:

error   Object { message: "Unsupported source URL: undefined" }

My snippet of code is this:

const handleCreate = async () => {
        const data = new FormData();
        data.append("file", file);
        data.append("upload_preset", "uploads");
        try {
          const uploadRes = await axios.post(
            "https://api.cloudinary.com/v1_1/CLOUDNAME/image/upload",
            data
          );
    
        const { url } = uploadRes.data;
        const newProduct = {
          title,
          desc,
          prices,
          extraOptions,
          img: url,
        };

        await axios.post("http://localhost:3000/api/products", newProduct);
        setClose(true);

        } catch (err) {
          console.log(err);
        }
      };