Semantic-ui action function with custom actions

Title is the question really. Using semantic-ui dropdown, I want to be able to click on a group name and have all the items underneath it, up until the next group, added to the dropdown input search but NOT the group name.

Code below: html

<select class="ui fluid search dropdown multiple" multiple>
  <option value="1">Group Name</option>
  <option class="item" value="a">Item 1</option>
  <option class="groupid" value="2">Group Name</option>
  <option class="item" value="b">Item 2</option>
  <option class="item" value="c">Item 3</option>
  <option value="3">Group Name</option>
  <option class="item" value="d">Item 4</option>
  <option class="item" value="e">Item 5 </option>
  <option class="item" value="f">Item 6</option>

Javascript so far:

  action: 'activate',
  onAdd: () => {},
  onChange: () => {},

I'm not really sure which of the behaviors I'm working with, I reckon that I need to create a custom action function but not sure how to allow it to display the items that I want