I am having a problem when fetching data from MongoDB to client side

Question

I have created a page named Product Detail. On this page, there is a delivered button, I want this button to reduce the quantity of the product by 1 whenever it will be clicked. However, it's working but after clicking the button there is an error coming. I have attached the error screenshot for your convenience. I have tried several times to solve the error but I couldn't find any solution. Is there anyone to help me out with that error, please?

Thanks in advance.

Error screenshots: https://i.ibb.co/CwmG0d5/image.jpg

1. Product detail code

import React from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import useProductDetail from '../../hooks/useProductDetail';
import './ProductDetail.css';

const ProductDetail = () => {  
  const { productId } = useParams();
  const [product, setProduct] = useProductDetail(productId);  
  
  const { quantity } = product;
  
    const navigate = useNavigate();
    const navigateToManageInventory = () => {
      navigate("/manage");
  };
  
  // event handler for delivered button
  const handleQuantity = () => {
    let newQuantity = quantity - 1;
    const newProduct = { ...product, quantity: newQuantity };
    setProduct(newProduct);
    const url = `http://localhost:5000/product/${productId}`;
    console.log(url);
    fetch(url, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(newProduct),
    });
  };

    return (
      <div className="container">
        <h3 className="text-center my-4">Product Details</h3>
        <div className="product-container mx-auto rounded-3 shadow">
          <div className="text-center my-3">
            <img width={250} src={product.picture} alt="" />
          </div>
          <div className="product-info px-4">
            <h6 className="text-muted">Product Id: {productId}</h6>
            <h3>{product.name}</h3>
            <p>
              <b>Price:</b> ${product.price}
            </p>
            <p>
              <b>Quantity:</b> {product.quantity}{" "}
              <small className="text-muted">pcs</small>
            </p>
            <p>
              <b>Supplier:</b> {product.supplier}
            </p>
            <p>{product.description}</p>
          </div>
          <div className="d-flex justify-content-center">
            <button
              onClick={() => handleQuantity(productId)}
              className="w-50 btn btn-primary mt-3"
            >
              Delivered
            </button>
          </div>
        </div>

        <div className="text-center">
          <button
            onClick={navigateToManageInventory}
            className="my-5 btn btn-primary"
          >
            Manage Inventories
          </button>
        </div>
      </div>
    );
};

export default ProductDetail;

2. Product detail (custom hook)

import { useEffect, useState } from 'react';

const useProductDetail = (productId) => {
    const [product, setProduct] = useState({});

    useEffect(() => {
        const url = `http://localhost:5000/product/${productId}`;
        fetch(url)
            .then(res => res.json())
            .then(data => setProduct(data));
    }, [productId]);

    return [product, setProduct];
};

export default useProductDetail;

3. Server-side code

app.put('/product/:id', async (req, res) => {
            const id = req.params.id;
            const quantity = req.body;
            const options = { upsert: true };
            const updateDor = {
                _id: id,
                name: product.name,
                price: product.price,
                description: product.description,
                quantity: quantity.quantity,
                supplier: product.supplier,
                picture: product.picture
            };
            const result = await productCollection.updateOne(query, updateDor, options);
            res.send(result);
        });