MediaRecorder API gets undefined after X amount of time -- Javascript/ReactJs

i'm trying to record the user voice in ReactJs using the MediaRecorder browser API. the declaration of "audioRecording" is outside of "startRecordingAudio()" because i need the user to choose when to stop recording, so "stopRecordingAudio()" must be able to reach "audioRecording.stop()".

Everything works fine for audios between 00:00-00:59 seconds, but when i try to leave it for a long time like 3-6 mins, suddenly "audioRecording" becomes undefined.

That's the code:

// Audio Recording
const audioData = [];
let audioRecording;


function startRecodingAudio() {

    // Start Recording
    navigator.mediaDevices.getUserMedia({ audio: true })
        .then(stream => {
            // Defining the recorder
            audioRecording = new MediaRecorder(stream);

            audioRecording.ondataavailable = e => {
                audioData.push(e.data);
                // Pushing the data to the array
            };

            // Start recording
            audioRecording.start();
            console.log('Gravando...');
            
            // when recording stop, save audio file
            audioRecording.onstop = () => {
                console.log('Parei gravação. Salvando audio...')
                setIsRecording(false);
                const audioBlob = new Blob(audioData, { type: 'audio/wav' });
                const audioReader = new FileReader();
                audioReader.readAsDataURL(audioBlob);
                audioReader.onloadend = () => {
                    setAudioFile(audioReader.result);
                    console.log('setei audio');


                }
            }
        }).catch(err => {
            console.log(err)
        });

}
// Stop audio recording
function stopRecordingAudio() {
    audioRecording.stop();
}

I'm Starting and Stoping this way:

<div>
        <div>
            Play/Stop
        </div>
        <div>
            <button type='button' onClick={startRecodingAudio}>Record</button>
            <button type='button' onClick={stopRecordingAudio}>Cancelar</button>
            <button type='button' onClick={() => console.log(audioRecording)}>Check State</button>
        </div>
    </div>

I started the recording and manually logging the audioRecording variable: Console print that shows the mediaRecorder suddenly getting undefined.

This problem also occurs if set some State after the recording, but in this case it doesn't even last 1 second. Like this:

function startRecodingAudio() {

    // Start Recording
    navigator.mediaDevices.getUserMedia({ audio: true })
        .then(stream => {
            // Defining the recorder
            audioRecording = new MediaRecorder(stream);

            audioRecording.ondataavailable = e => {
                audioData.push(e.data);
                // Pushing the data to the array
            };

            // Start recording
            audioRecording.start();
            setIsRecording(true);
            console.log('Gravando...');

            // when recording stop, save audio file
            audioRecording.onstop = () => {
                console.log('Parei gravação. Salvando audio...')
                setIsRecording(false);
                const audioBlob = new Blob(audioData, { type: 'audio/wav' });
                const audioReader = new FileReader();
                audioReader.readAsDataURL(audioBlob);
                audioReader.onloadend = () => {
                    setAudioFile(audioReader.result);
                    console.log('setei audio');


                }
            }
        }).catch(err => {
            console.log(err)
        });

}

Does anyone have any idea on what could it be? I would really appreciate it.