[Mark Series] Multi-select or deselect of bubbles using Mouse/Ctrl-Click

[PalsRoy]

This feature discussion is an extension of #925. It was initially a discussion with the client but now they insist on this feature as a group selection of orders for trading. Even sometimes when user has selected a few orders through marquee selection he might not want to trade on all of them at one go. ( Using version => "react-vis": "^1.11.1" )
I could workaround onValueClick for individual selection and de-selection of Orders/Bubbles. The code snippet of which is given below :

<FlexibleXYPlot>
<Highlight
               drag
               onBrushStart={() => this.setState({highlighting: true})}
               onBrush={area => this.setState({filter: area})}
               onBrushEnd={area => this.setState({highlighting: false, filter: area})}
               onDragStart={() => this.setState({highlighting: true})}
               onDrag={area => this.setState({filter: area})}
               onDragEnd={area => this.setState({highlighting: false, filter: area})}
               />
             <MarkSeries
               className="mark-series-example"
               strokeWidth={2}
               opacity="0.8"
               sizeRange={[0, 100]}
               style={{pointerEvents: highlighting ? 'none' : ''}}
               colorType="literal"
               getColor={d => highlightPoint(d) ? '#5e9bdb' : '#5f667c'}
               onValueMouseOver={d => this.setState({hovered: d})}
               onValueMouseOut={() => this.setState({hovered: false})}
               onValueClick={(d) => this.setState({ filter : {right:d.x,left:d.x,bottom:d.y,top:d.y}})}
               data={this.state.SubscribedData}/>
               {
                hovered && <Hint value={hovered}>
                <div style={{background: '#363a46',
                  fontSize:'11px',
                  borderRadius:'4px',
                  padding:'7px 10px',
                  boxShadow:'0 2px 4px rgba(0, 0, 0, 0.5)',
                  textAlign:'left'}}>
                <p>{this.props.selectedGroup1.value}: {hovered.name}</p>
                <p>{this.props.selectedX.label}: {hovered.x}</p>
                <p>{this.props.selectedY.label}: {hovered.y}</p>
                <p>{this.props.selectedZ.label}: {hovered.size}</p>
                </div>
                </Hint>
                }
             <CustomAxisLabel title={selectedYFromStore}/>
             <CustomAxisLabel title={selectedXFromStore} xAxis />
           </FlexibleXYPlot>

Any help is greatly appreciated!!