Redux - How to pass around a MediaStream - should I use a global variable or store non serializable object in the store

I am recording audio from a user's microphone throughout my web app (i.e. the whole time they use it and am streaming it to a backend). I call navigator.mediaDevices.getUserMedia() in a component, say at root level.

I also have a MediaRecorder to record part of the audio from the stream when I click a button (change state from inactive to recording so I can later play back what they said). The issue is I need to pass the MediaStream to the MediaRecorder without passing it down a bunch of components. MediaStream is non-serializable and so against Redux recommmendations I shouldn't store it there. Is the easiest way to store it in the window object and use it throughout my project?

Seems a bit dirty and there has got to be a better way of doing it. I could store it in redux but I assume I am going to wish I had time travel debugging at some point. Should I be using a middleware or something to hold my MediaStream?

<AudioRecorder>
   <Timer />
   <OtherPage>
       <several levels down>
           <RecordButton />
       </several levels down>
   </OtherPage
</AudioRecorder>

Just wondering what the best approach here is? Is going with the React Context API worth it? I might as well just store it in redux at that point?

TLDR; how should I access a media stream globally in my React application