Untitled

const myFilter = products.filter(el =>
  el.name.toLowerCase().includes(filterText.toLowerCase()) &&
  (inStockOnly ? el.stocked : true || !inStockOnly)
);

const finalList = myFilter.reduce((a, c) => {
  const isCategoryChanged = c.category !== a.lastCategory;
  const categoryRow = isCategoryChanged ? <ProductCategoryRow key={c.category} category={c.category} /> : null;
  const productRow = <ProductRow key={c.name} product={c} />;

  a.output = [...a.output, categoryRow, productRow].filter(Boolean);
  a.lastCategory = c.category;
  return a;
}, { lastCategory: null, output: [] });