Estoy usando componentes funcionales de React en mi aplicación creada con create-react-app, por lo que React.StrictMode se habilita automáticamente. No quiero deshabilitarlo, ya que me está ayudando a detectar posibles problemas a medida que me desarrollo. El problema es que hace que el componente se renderice dos veces, lo que genera un error:
DOMException no detectada: no se pudo ejecutar 'createMediaElementSource' en 'AudioContext': HTMLMediaElement ya se conectó previamente a un MediaElementSourceNode diferente cuando HTMLMediaElement se conecta en el primer procesamiento. Me pregunto, ¿hay alguna forma de desconectar HTMLMediaElement del MediaElementSourceNode anterior... tal vez establecerlo en null o algo así, para que pueda obtener una nueva conexión?
A continuación, está mi código que arroja el error:

 import React, { useEffect, useRef } from "react"; const Canvas = () => { const audioRef = useRef(null); const filUploadRef = useRef(null); const canvasRef = useRef(null); let audioSource; let analyser; let dataArray; useEffect(() => { const audioElement = audioRef.current; const canvas = canvasRef.current; const fileUploadField = filUploadRef.current; fileUploadField.addEventListener("change", () => { const audioContext = new AudioContext(); const files = fileUploadField.files; audioElement.src = URL.createObjectURL(files[0]); audioElement.load(); audioElement.play(); audioSource = audioContext.createMediaElementSource(audioElement); analyser = audioContext.createAnalyser(); audioSource.connect(analyser); analyser.connect(audioContext.destination); dataArray = new Uint8Array(analyser.frequencyBinCount); }); }, []); const handleTogglePlayPause = () => { //TODO: Implement toggle Play/Pause when the button is clicked. }; return ( <> <canvas ref={canvasRef} /> <audio controls ref={audioRef} /> <input type="file" id="file-upload" accept="audio/*" ref={filUploadRef} /> <button onClick={handleTogglePlayPause} type="button"> {/* ^ This button element is related to handleTogglePlayPause function for a different stage*/} Play/Pause </button> </> ); }; export default Canvas;