Render select with optgroup from a given product list

I can create a select field of all products with this code:

{{view "select" prompt="All Products"
                content=model.products
                optionLabelPath="content.name"
                optionValuePath="content.name"
                value=selectedProduct
                class="form-control"}}

But I'd like to render the products in optgroups to have a nice UX:

The data I fetch from the server looks like this:

{
  products: [
    {
      id: 1,
      name: "Vegetables"
    },
    {
      id: 2,
      name: "Tomato",
      parent: 1
    },
    {
      id: 3,
      name: "Potato",
      parent: 1
    },
    {
      id: 4,
      name: "Fruits"
    },
    {
      id: 5,
      name: "Apple",
      parent: 4
    }
  ]
}

How can I render the select field in a way that it includes the products in optgroups depending on the parent attribute?