Невозможно добавить товары в корзину

Я использую django и react для создания простой системы оформления заказа, и мне нужна помощь, чтобы исправить эту ошибку. Я не уверен, что моя функция для события onclick является точной в приведенной ниже программе. Мне очень трудно понять, почему я не могу добавить товар в корзину, нажав на кнопку корзины с помощью события onClick. Ошибка, которую я получаю на js консоли в браузере: page not found, and the url on the console is pointing to the actual url containing the id of the element I'm trying to add. Whenever I click on the add to cart button that 404 page not found` ошибка появляется как в js консоли в браузере, так и на сервере django в терминале.

The react component 
const ProductDetails = (props) => {
    const [product, setProduct] = useState({});

    useEffect(() => {
        const id = props.match.params.id;
        const fetchData = async () => {
            try {
                const res = await axios.get(`${ProductDetailURL}/product/${id}`);
                setProduct(res.data);
                console.log(res.data)
            }
            catch (err) {

            }
        };

        fetchData();
    }, [props.match.params.id]);

    const handleAddToCartURL = (id) =>{
        const fetchData = async () => {
            try {
                const res = await axios.post(`${AddToCartURL}/add-to-cart/${id}`);
                setProduct(res.data);
                console.log(res.data)
            }
            catch (err) {

            }
        };

        fetchData();
    }

    return(
        <Box sx={{ flexGrow: 1 }} m={4}>
            <Grid container spacing={3}>
                <Grid item xs={9}>
                    <Item>
                       <img src={product.image} alt="" />
                       <div>
                           <p>{product.description}</p>
                           <p>{product.label}</p>
                           <p>{product.price}</p>

                       </div>
                       <button color='primary' onClick={() => handleAddToCartURL(product.id)}>
                            <AddShoppingCartIcon />
                        </button>  
                    </Item>                  
                </Grid>
                <Grid item xs>
                    <Item>Similar Products</Item>
                </Grid>
            </Grid>
    
      </Box>
    )
}


export default ProductDetails

А программа Django для добавления в корзину выглядит следующим образом:

class add_to_cart_view(APIView):
    def post(self, request, *args, **kwargs):
        id = request.data.get('id', None)
        if id is None:
            return Response({"message": "Invalid request. Ensure ypu have added added products to the cart"}, status=HTTP_400_BAD_REQUEST)

        product = get_object_or_404(Product, id=id)

        order_product_qs = product.objects.get_or_create(
            product=product,
            user=request.user,
            ordered=False
        )
        
        if order_product_qs.exists():
            order_product = order_product_qs.first()
            order_product.quantity += 1
            order_product.save()
        else:
            order_product = product.objects.create(
                product=product,
                user=request.user,
                ordered=False
            )
            
    
        order_qs = Order.objects.filter(user=request.user, ordered=False)
        if order_qs.exists():
            order = order_qs[0]
            if not order.products.filter(product__id=order_product_qs.id).exists():
                order.products.add(order_product)
                return Response(status=HTTP_200_OK)

        else:
            ordered_date = timezone.now()
            order = Order.objects.create(user=request.user, ordered_date=ordered_date)
            order.products.add(order_product)
            return Response(status=HTTP_200_OK)

`${AddToCartURL}/add-to-cart?${id}`

request.query_params