Hide canvas element for visualSetting in react-mic - reactjs

Question

I am trying to hide the canvas element in this MyRecorder component:
The element is visible when inspecting the page in browser.
import React, {Component} from 'react';
import { render } from 'react-dom';
import start from '../img/start.svg';
import stop from '../img/stop.svg';
import pause from '../img/pause.svg';
import { ReactMic } from 'react-mic';
class MyRecorder extends Component {
constructor(props){
super(props);
this.state = {
blobObject: null,
isRecording: false,
isPaused: false
}
}
startOrPauseRecording= () => {
const { isPaused, isRecording } = this.state
if(isPaused) {
this.setState({ isPaused: false })
} else if(isRecording) {
this.setState({ isPaused: true })
} else {
this.setState({ isRecording: true })
}
}
stopRecording= () => {
this.setState({ isRecording: false });
}
onStop= (blobObject) => {
this.setState({ blobURL : blobObject.blobURL });
}
render() {
const { blobURL, isRecording, isPaused } = this.state;
const getImage = () => {
if(isRecording && !isPaused) {
return (`url(${pause})`)
}
else {
return (`url(${start})`)
}
}
return(
<div
style={{marginLeft: 15,}}
>
<ReactMic
record={isRecording}
pause={isPaused}
visualSetting="none"
audioBitsPerSecond= {128000}
onStop={this.onStop}
onStart={this.onStart}
onSave={this.onSave}
strokeColor="#000000" />
<audio ref="" controls="controls" src={blobURL}></audio>
<br />
<br />
<button
className="btn btn-light recButton"
style={{
backgroundImage: `url(${isRecording && !isPaused? pause : start})`,
width:40,
height:40,
}}
onClick={this.startOrPauseRecording}>
</button>
<button
className="btn btn-light recButton"
disabled={!isRecording}
style={{
backgroundImage: `url(${stop})`,
width:40,
height:40,
}}
onClick={this.stopRecording}>
</button>
<br />
</div>
);
}
}
export default MyRecorder;
When the visualSetting is:
visualSetting="sinewave"
Sinewaves are shown in the canvas, after changing it to:
visualSetting="none"
The waves go away but the canvas element is still there. Any idea how to get rid of the element?

Answer 1

I was able to find a workaround. In the file node_modules/react-mic/es/components/ReactMic.js
Change line 130 from:
return React.createElement('canvas', { ref: 'visualizer', height: height, width: width, className: this.props.className });
To:
return React.createElement('canvas', { ref: 'visualizer', height: 0, width: 0, className: this.props.className });