How can I add and remove list of select box in reactjs

1.I can only add and remove "value". It's doesn't remove from UI, but I see value "Add and Remove". I need to value remove from UI that is label.

If user click one items list of selected box , it will add data inside handleadd() method. I don't need duplicate data . 3.if user click on left arrow button , data will remove from select box(1) and it will add select box (2).

4.if user click on Right arrow button , data will remove from select box(2) and it will add select box (1).

class FieldForm extends React.Component {

state = { itemlist:[], itemlist2:[] } onChange = e => { const newitems = [...this.state.itemlist] newitems.push(e.target.value); this.setState({ itemlist:newitems }); };

handleadd = (data) => { this.setState({ itemlist2:data })

} handleremove= (data) => { console.log("remove",data) const newitems = [...this.state.itemlist2]

newitems.pop(data);
this.setState({
  itemlist2:data
})
console.log("data",data)

}

render() {

const options = [

{label:'Two', id:"2" }, { label:'Three', id:"3" } , {label:'Four', id:"4" }] return (

<select className="custom-select" onChange={this.onChange} multiple>
  {options&& options.map(item=>(  <option value={item.label}>{item.label}</option>))}

</select>
<div className="col-md-2 ">      
<button onClick={()=>this.handleadd(this.state.itemlist)} class="btn btn-primary btn-block w-25 margin-bottom">
  <i class="fa fa-arrow-right"></i>
</button>
<button onClick={()=>this.handleremove(this.state.itemlist) }class="btn btn-primary btn-block w-25">
  <i class="fa fa-arrow-left"></i>
</button>
</div>

<select className="custom-select" multiple>
  {
    this.state.itemlist2.map(item=>( <option value={item}>{item}</option>))
  }
</select>
)

} }