Tengo esta aplicación simple de reaccionar js en la que tengo dos botones, grabar y detener. Todo funciona bien. Ahora, lo que estoy tratando de hacer es que solo debe haber un botón, si no se hace clic, debe mostrar grabar audio, y cuando hago clic en ese botón, debe mostrar detener y debe comenzar a grabar un audio. Intenté hacer esto con el operador coalescente nulo pero no pude encontrar la manera. Alguien por favor ayuda! Aquí está el código:

 import React from 'react'; import './App.css'; import MicRecorder from 'mic-recorder-to-mp3'; const Mp3Recorder = new MicRecorder({ bitRate: 128 }); class App extends React.Component { constructor(props){ super(props); this.state = { isRecording: false, blobURL: '', isBlocked: false, }; } start = () => { if (this.state.isBlocked) { console.log('Permission Denied'); } else { Mp3Recorder .start() .then(() => { this.setState({ isRecording: true }); }).catch((e) => console.error(e)); } }; stop = () => { Mp3Recorder .stop() .getMp3() .then(([buffer, blob]) => { const blobURL = URL.createObjectURL(blob) this.setState({ blobURL, isRecording: false }); }).catch((e) => console.log(e)); }; componentDidMount() { navigator.getUserMedia({ audio: true }, () => { console.log('Permission Granted'); this.setState({ isBlocked: false }); }, () => { console.log('Permission Denied'); this.setState({ isBlocked: true }) }, ); } render(){ return ( <div className="App"> <header className="App-header"> <button onClick={this.start} disabled={this.state.isRecording}>Record</button> <button onClick={this.stop} disabled={!this.state.isRecording}>Stop</button> <audio src={this.state.blobURL} controls="controls" /> </header> </div> ); } } export default App;