Not getting the data by fetching dynamically with _id from mongoDB

I have tried a lot to fetch this https://brand-shop-server-two.vercel.app/products/${_id}
I tried manually also. But I am not getting any value if I put the /_id.. Please help me to solve the problem. I want to update a product details onClick.But I am not able to update my product untill I get the specific product Id and details. As I m very beginner, I tried a lot to solve the issue.But I couldn’t. Hope someone will give the solve with explaination.

 const productCollection = client.db("AllProduct").collection("AllProductCollection");

 // update functionality
   app.get('/products/:id', async (req, res) => {
     const id = req.params.id;
     const query = { _id: new ObjectId(id) }
     const result = await productCollection.findOne(query);
     res.send(result);
   })


   app.put('/products/:id', async (req, res) => {
     const id = req.params.id;
     const filter = { _id: new ObjectId(id) }
     const updatedProductDetails = req.body;
 
     const updatedProduct = {
         $set: {
           type: updatedProductDetails.type,
           rating: updatedProductDetails.rating,
           productName: updatedProductDetails.productName,
           price: updatedProductDetails.price,
           image: updatedProductDetails.image,
           brandName: updatedProductDetails.brandName,
           description: updatedProductDetails.description,
         }
     }
     const result = await productCollection.updateOne(filter, updatedProduct);
           res.send(result);
   }
   )

        path: "/update/:id",
        element: <Update></Update>,
        loader: ({params}) => fetch(`https://brand-shop-server-two.vercel.app/${params.id}`)

Link to={`/update/${_id}`} className="w-full">
            <button className=" btn py-3 bg-blue-950 hover:text-blue-950 hover:bg-white hover:border-2 hover:border-blue-950 text-white font-normal tracking-widest border-0 px-8  w-full rounded-none">
              update
            </button> 
</Link>

const data = useLoaderData()
    const { type, rating, productName, price, image, brandName, description, _id} = data;


    const handleUpdate = event => {
        event.preventDefault();

        const type = event.target.value;
        const rating = event.target.value;
        const productName = event.target.value;
        const price = event.target.value;
        const image = event.target.value;
        const brandName = event.target.value;
        const description = event.target.value;

        const updatedProduct = { type, rating, productName, price, image, brandName,description }

        fetch(`https://brand-shop-server-two.vercel.app/products/${_id}`, {
            method: 'PUT',
            headers: {
                'content-type': 'application/json'
            },
            body: JSON.stringify(updatedProduct)
        })
            .then(res => res.json())
            .then(data => {
                console.log(data);
                if (data.modifiedCount > 0) {
                  swal("Updated successfuully");

                }
            })
    }