How to fix the Semantic-UI-React dropdown for multiple select

Question

The dropdown has a 'x' icon which is not working properly for multiple label select. It is not removing the layer on clicking 'x' ( though it is working on 2 clicks on the label ).

I have tried adding an extra OnRemove function which i was able to see in the React Developer Tools.

This is child component

<div ref={node2 => (this.node2 = node2)}>
<Dropdown
 multiple
 search
 selection
 options={this.districtOptions}
 placeholder="Select..."
 onChange={(props, data, el) => {
 data.value.map(this.props.toggleLayer);
 console.log('The selected layer from dropdown is :'+data.value);
}}
/>
</div>

This one is the controller

toggleLayer = el => {
        const visibility = this.state.visibility;
        console.log(visibility);
        visibility[el] = !visibility[el];
        this.setState({
          visibility: visibility
        });
        this.setVisibility(el);
      };
    
      setVisibility(layer_id) {
        if (this.state.visibility[layer_id]) {
          this.map.setLayoutProperty(layer_id, "visibility", "visible");
        } else {
          this.map.setLayoutProperty(layer_id, "visibility", "none");
        }
        console.log('The selected layer is: ' + layer_id);
      }

I am making a codesandbox of the code

https://codesandbox.io/s/fast-cache-ui2rp?fontsize=14

P.S - The semantic ui react dependency is not working in the codesandbox properly, but the buttons are there. *in the top right *

Kindly fork the codesandbox and provide edits if you understand this and can help.

Answer 1

<Dropdown
  multiple
  search
  selection
  options={this.districtOptions}
  placeholder="Select..."
  onChange={(props, data, el, i) => {
  let layers = data.value;
  let invisible_layers = this.districtOptions.filter((el) => {
  if (!data.value.includes(el)) {
     return el
  }
})
console.log(invisible_layers);
        
layers.forEach((el) => {
   console.log(this.props.state)
       if (!this.props.state[el]) {
          this.props.toggleLayer(el)
       }
     }
  )
 }
}

This can also be done by removing layers from the layers array.

layers.forEach((el) => {this.props.toggleLayer(el))
    while(layers.length > 0) {
    layers.pop();
}