Loading products data from Firestore to Webpage using javascript

I am fairly new to firestore and for practice I am building an online store using firestore as my database. I am trying to fetch the products from firestore then displaying each product on its product card. I am fetching all the products once in the product collection using the forEach() method as stated in the Firebase documentation and adding the result to the product card as shown below:

var db =  firebase.firestore();
var view = document.getElementById("productsRow");

//fetch products from database
db.collection("products").get().then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
        // doc.data() is never undefined for query doc snapshots
        console.log(doc.id, " => ", doc.data());
        var image = doc.data().images[0];
        var image2 = doc.data().images[1];
        var title = doc.data().title;
        var price = doc.data().pricing.toString();


        view.innerHTML = `

                                            <div class="col-xl-3 col-lg-4 col-md-4 col-12">
                                                <div class="single-product">
                                                    <div class="product-img">
                                                        <a href="product-details.html">
                                                            <img class="default-img" src="${image}" alt="#">
                                                            <img class="hover-img" src="${image2}" alt="#">
                                                        </a>
                                                        <div class="button-head">
                                                            <div class="product-action">
                                                                <a data-toggle="modal" data-target="#exampleModal" title="Quick View" href="#"><i class=" ti-eye"></i><span>Quick Shop</span></a>
                                                                <a title="Wishlist" href="#"><i class=" ti-heart "></i><span>Add to Wishlist</span></a>
                                                                <a title="Compare" href="#"><i class="ti-bar-chart-alt"></i><span>Add to Compare</span></a>
                                                            </div>
                                                            <div class="product-action-2">
                                                                <a title="Add to cart" href="#">Add to cart</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="product-content">
                                                        <h3><a href="product-details.html">${title}</a></h3>
                                                        <div class="product-price">
                                                            <span>Ksh. ${price}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

            
        `
    });
});

the problem is , the result shows only one product on the online store and I have fifteen products in the collection. What could be the issue as I believe the forEach() method should go through each product in the collection and create the product card in the process as I have done above. Or should I put each fetched product into an array then loop across the array to display each product card?

the database:

the result