mic-recorder-to-mp3 | Microphone Recorder to mp3 | Audio Utils library

I'm currently building a browser-based audio editor and I'm using ffmpeg.wasm (a pure WebAssembly/JavaScript port of FFmpeg) to do it.

I'm using this excellent example, which allows you to uploaded video file and convert it into a gif:

For the web app I'm building in React, I need to record audio and be able to somehow put that recorded audio in the app's global state so I can use and manipulate that recorded audio in different components of the app.

My global state is setup using React Hooks (made and managed with useReducer, createContext, useContext) and I believe Hooks only work for functional components, not class components.

So the issue I'm running up against is that every tutorial I've followed to get my browser microphone to work uses class components (like the code below), not functional components. And I'm assuming that this is for good reason because when I've tried to translate these class components into functional components, I get the error: "cannot read property 'finish' of 'undefined'"

Are there ways to take this audio data (blobURL) and pass it to my global state?

Alternatively (and ideally), is there a way to use the microphone to record audio in a functional component instead of a class component?

I'm creating a very simple HTMLElement class for a Javascript widget. There is a button which can be used to toggle the microphone recording. I can log the resulting files to console, and everything works well. When I try to save this file in the stop() callback and assign it to a member variable I can't access it anymore.

I thought that I could use this in arrow function callbacks like this as of ES6? What am I missing here?