Untitled

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

console.log(myFilter);

const finalList = myFilter.reduce((acc, { category, name }) => {
  if (category !== acc.lastCategory) {
    acc.output.push(
      <ProductCategoryRow key={category} category={category} />
    );
    acc.lastCategory = category;
  }

  acc.output.push(<ProductRow key={name} product={{ name, category }} />);
  return acc;
}, { lastCategory: null, output: [] });

console.log(finalList.output);