Length of Array of Object is showing 0 but, it contain the objects

Question

Console log of the array of object variable with it's length as 0

The array of object variable named products is declared inside another component where it was initialized with objects using the push() method and it is passed into this component as a prop. But, the length of this 'product' variable is showing 0 and also array function like forEach and map is working with this variable.

Orders.js

import "./Orders.css";
import SearchIcon from "@material-ui/icons/Search";
import { useSelector } from "react-redux";
import { selectUser } from "../../features/userSlice";
import db from "../../firebase";
import OrderedProducts from "./OrderedProducts";

function Orders() {
    const user = useSelector(selectUser);
    const [orders, setOrders] = useState([]);

    useEffect(() => {
        if (user) {
            db.collection("users")
                .doc(user.id)
                .collection("orders")
                .onSnapshot((OrderSnapshot) => {
                    setOrders(
                        OrderSnapshot.docs.map((order) => {
                            let productsArr = [];
                            order.data().products.forEach((cartProduct) => {
                                db.collection("products")
                                    .where("productId", "==", cartProduct.productId)
                                    .onSnapshot((productSnapshot) => {
                                        const product = productSnapshot.docs[0].data();
                                        productsArr.push({
                                            id: product.productId,
                                            image: product.image,
                                            title: product.title,
                                            quantity: cartProduct.quantity,
                                            amount: product.specialPrice * cartProduct.quantity,
                                        });
                                    });
                            });
                            return {
                                id: order.id,
                                amount: order.data().amount,
                                products: productsArr,
                                created: order.data().created,
                            };
                        })
                    );
                });
        }
    }, [user]);

    return (
        <div className="orders">
            <div className="orders__search">
                <input type="text" placeholder="Search your orders here" />
                <button>
                    <SearchIcon />
                    Search Orders
                </button>
            </div>
            {orders.map((order) => (
                <OrderedProducts key={order.id} order={order} />
            ))}
        </div>
    );
}

export default Orders;

OrderedProducts.js

import "./OrderedProducts.css";

function OrderedProducts({ order: { created, amount, products } }) {
    console.log("Length >> ", products.length);
    console.log("Products >> ", products);

    return (
        <div className="orderedProducts">
            <div className="orderedProducts__list">
                <p>{amount}</p>
                {products?.map((product) => (
                    <div key={product.id} className="orderedProducts__listItem">
                        <div className="orderedProducts__image">
                            <img src={product.image} alt="" />
                        </div>
                        <div className="orderedProducts__info">
                            <h3>{product.title}</h3>
                            <p>Quantity: {product.quantity}</p>
                            <p>Seller: ECommSuper</p>
                        </div>
                    </div>
                ))}
            </div>
            <div className="orderedProducts__status"></div>
        </div>
    );
}

export default OrderedProducts;