ارسال البيانات من الواجهة الاماميةjs

حاولت كثيرا في ايجاد حل لاضافة المنتج الى سلة الشراء ورفع صورة ولم استطيع فعل ذلك

import axios from "../config/axios";
import { GET_PRODUCT_URL,ADD_TO_CART } from "../config/urls";
import { useEffect, useState } from "react";
import "../styles/getProduct.css";
import Navbar from "./navbar/navbar";
import { useParams } from "react-router-dom";

function GetProduct() {
  const [product, setProduct] = useState("");
  const [image, setImage] = useState("");
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [price, setPrice] = useState("");

    const id = window.location.pathname.split("/")[2];
    console.log(id);
    
    const cartid = useParams()
  

  useEffect(() => {
    getProduct();
  }, []);

 const headers = {
    userId:localStorage.getItem("id"),
    productId:id,
    quantity:1
 }
  
  const addToMyCart = async () => {
   

    try {
      const tokenValue = localStorage.getItem("token");
      let token = JSON.parse(tokenValue);

      await axios
        .post(ADD_TO_CART ,{headers:headers},
            
          {
            headers: {
              Authorization: token,
            },
          }
        )

        .then((res) => {
          console.log(res);
        });
    } catch (e) {
      console.log(e);
    }
  };

  const getProduct = async () => {
    try {
      const tokenValue = localStorage.getItem("token");
      let token = JSON.parse(tokenValue);

      await axios
        .get(GET_PRODUCT_URL + "/" + id, {
          headers: {
            Authorization: token,
          },
        })
        .then((res) => {
          console.log(res);
          setProduct(res.data);
          setImage(res.data.image);
          setTitle(res.data.title);
          setDescription(res.data.description);
          setPrice(res.data.price);
        });
    } catch (e) {
      console.log(e);
    }
  };

  return (
    <>
      <Navbar />
      <div class="container ">
        <div class="grid text-center">
          <div class="row align-items-start">
            <div class="col">
              <div class="card-header">Featured</div>

              <img src={image} class="card-img-top" alt="..." height="200px" />
            </div>
            <div class="col" style={{ textAlign: "left" }}>
              <div class="card-body mt-4">
                <h5 class="card-title">{title}</h5>
                <p class="card-text" style={{ width: "50%" }}>
                  {description}
                </p>
              </div>
            </div>
            <div class="col edit-col-3">
              <div className="edit-div">
                <p>{price}$</p>
                <p>FREE delivery</p>
                <small class="text-body-secondary d-flex float-end">
                  <button class="btn"
                    onClick={() => {
                        addToMyCart()
                        
                       }}
                  >
                    <i
                      class="fa-solid fa-cart-shopping"
                      style={{ color: "deeppink" }}
                    ></i>
                    addToCart
                  </button>
                </small>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default GetProduct;

وفي الواجهة الخلفية كل شيء يعمل على مايرام

test.zip