Удалить предыдущие события из объекта состояния в ReactJS

У меня есть кнопки Mic-off и Mic-on, которые переключаются с помощью тройной операции. events (массив JSON) - это список объектов JSON с event_name и date_time.

{this.props.events.map((event) => (
 <div  key = {event.event_name}>
    <div> {this.state.micStates[event.event_name]?
     <span onClick = {()=>this.stopRecord(event.event_name)}> <MicOn /> 
     </span> 
     :<span onClick = {()=>this.startRecord(event.event_name)}><MicOff />       
    </span>}              
   </div>
   <li style = {{color:'pink',}}>{event.date_time}</li>
 </div> ))
}

Два метода: startRecord, StopRecord

startRecord: он начнет запись и сохранит в кусках и удалит предыдущее состояние события, либо установит для него значение false, если щелкнуть более одного раза

stopRecord: остановит mediaRecorder и сохранит файл в формате formData и установите для события текущего состояния значение false.

constructor(props) {
    super(props);
    this.state = {
        mics :{},
    }
}
startRecord = event => {
    var size=Object.keys(this.state.mics).length
    if (size<1){
        let {mics}=this.state;
        mics[event]=mics[event]? false : true;
        this.setState({ mics });


        // do the work here
    }
    else{
        this.setState(prevState=>({
            mics:{},
        }));
        console.info("switch other state off");
    }
}

stopRecord = event => {

    let {mics}=this.state;
    mics[event]=mics[event]? false : true;
    this.setState({ mics });
    console.info(Object.keys(this.state.mics).length);

}

Я не хочу переключать несколько кнопок одновременно, если одно событие истинно, тогда как другое, присутствующее в mics, должно быть ложным.