Множественный флажок в таблице начальной реакции

Question

Реализовано несколько флажков в таблице начальной реакции, но когда я проверяю флажок, он проверяется, и если я ищу и проверяю в таблице, уже проверенные исчезают ... пожалуйста, помогите ... вот что я сделал.

class xyz extends Component {

action(cell, row) {    
    return(
        <div class="col-auto">
            <Checkbox   row = {row}/>//call the checkbox class
        </div>   
    )
}

render() {  
    return (         
        <form role="form" method="post" action={"/xyz/?token=" + cookies.get('qtoken')}>
            <div class="col-6">
                <div className="form-group">
                    <label>Title</label>
                    <input type="text" className="form-control" placeholder="Enter Title " name="title" onChange={this.namechange}required/>
                </div>

            <div class="col-6">
                <div style={{
                    paddingLeft: '3%',
                    width: '98%'}}>
                    <BootstrapTable data={this.state.data2}  height='500px' scrollTop={ 'Bottom' } search dataSort striped hover >
                        <TableHeaderColumn  dataField='sno'  dataAlign="center" isKey dataSort>S.No</TableHeaderColumn>
                        <TableHeaderColumn dataField='name' tdStyle={ { whiteSpace: 'normal' } } dataAlign="center" dataSort>Name</TableHeaderColumn>
                        <TableHeaderColumn dataField='mobile' tdStyle={ { whiteSpace: 'normal' } } dataAlign="center" dataSort>Mobile</TableHeaderColumn>
                        <TableHeaderColumn dataField='_id,participants'  dataFormat={this.action} dataAlign="center" dataSort>Action</TableHeaderColumn>
                    </BootstrapTable>
                </div>
            </div></div>

            <button type="submit" className="btn btn-primary">Submit</button>
        </form>        

            );
        }
    }


class Checkbox extends Component {

    constructor() {
        super();
        window.postMessage('renderTable','*');
        this.state = {   
            data : "", 
            zzz:[],
        };

        this.checkboxchange=this.checkboxchange.bind(this);
    }

    checkboxchange(event){
        this.setState({ zzz: event.target.value });
    }

    render() {
        return (    

            <div class="form-check mb-2">
                <input class="form-check-input" name="zzz" onChange={this.checkboxchange}  value={this.props.row._id} type="checkbox" id="autoSizingCheck"/>
             </div> //
         )}
    }        

export default xyz;    

проверенное условие работает, если я прокручиваю и выбираю флажок, но когда я ищу определенное имя в таблице и устанавливаю флажок, уже проверенное значение не проверяется ... может кто-нибудь предложить какой-либо способ сделать это.