How to properly design a react application ( see details )?

Question

React

There is such a select with an optiongroup

in which you can select both 1 select and the whole group.
after clicking on the select, its value gets into the array,
models : []
but what to do with the whole group?
here is the structure of the array which is in the select

[
    {
      value: 495,
      label: '1 Series',
      children: [
        {
          value: 10920,
          label: '116'
        },
        {
          value: 10921,
          label: '118'
        },
        {
          value: 10922,
          label: '120'
        },
        {
          value: 10923,
          label: '125'
        },
        {
          value: 10924,
          label: '135'
        }
      ]
    },
    {
      value: 10925,
      label: '1 Series М'
    }
]

you need to somehow take all the values ​​of childrens when the whole group is selected, and only the value of value when only 1 element is selected and push it into the models array , but you also need to take into account the fact that select will be cloned for other car brands

Answer 1

Pseudocode. I think you get the idea.

onclick(item)
{
 if(item.children != null)
     {
     foreach(ch_item in item.children)
          {
          add_to_selected(ch_item)
          }
     } else
     {
     add_to_selected(item)
     }
}