Refactor

    const myFilter = products.filter(el => {
        //make name 0f product to lower char and find index of char is filtered
        let name = el.name.toLowerCase().indexOf(filterText.toLowerCase());
        //return output was found char in name of product and has in stock
        return name !== -1 && ((inStockOnly && el.stocked) || !inStockOnly);
    })

    const finalList = myFilter.reduce((acc, cur) => {
        //check category same?
        cur.category !== acc.lastCategory
            ? acc.output =
                // add product category
                [...acc.output, <ProductCategoryRow key={cur.category} category={cur.category} />]
                : null;
        //change last category is current category
        acc.lastCategory = cur.category;
        //add product list
        acc.output = [...acc.output, <ProductRow key={cur.name} product={cur} />]
        return acc;
    }, { lastCategory: null, output: [] })