Как в JSX отобразить количество элементов функции map?

const products = filteredProducts.filter(product => product.category === "Some, category").map (item => {
                          return (
                          <ProductCard 
                            key={item.id}
                            product = {item}
                          />)} )
return (
  <div className="products-list">
                        <Title title="Some Title" />
                        <div className="products-container">
                          <p> {products.length} </p>
                        </div>
                        <div className="products-container">
                        {products}
                        </div>
                      </div>
)

const products = filteredProducts.filter(product => product.category === "Some, category");

const count = products.length;

return (
  <div className="products-list">
    <Title title="Some Title" />
    <div className="products-container">
        <p> {count} </p>
    </div>
    <div className="products-container">
      {products.map(product => (
          <ProductCard 
             key={product.id}
             product = {product}
           />
       ))}
     </div>
</div>
);

const someCategoryProducts =
  filteredProducts.filter(product => product.category === "Some, category");

return (
  <div>
    <div>{someCategoryProducts.length}</div>
    <div>{someCategoryProducts.map(mapFn)}</div>
  <div>
);

const items = filteredProducts.filter((product) => product.category === "Some, category");

return (
    <div className="products-list">
        <Title title="Some Title" />
        <div className="products-container">
            <p>{items.length}</p>
        </div>
        <div className="products-container">
            {items.map((product) => (
                <ProductCard
                    key={product.id}
                    product = {product}
                />
            )}
        </div>
    </div>
);