IconSwitch | Custom Android Switch widget | Widget library

I am having trouble cancelling loadAsync when a user navigates away from my page. I have tried to use a cleanup function on useEffect but since the soundObject hasn't loaded yet it will give me an error since soundObject equals null. I have also tried to use redux and add soundObject.stopAsync when other pages come into focus but since the soundObject may not be set yet it will not cancel and I will have audio playing and can't be stopped. Here is my Pause/Play button component where I call loadAsync. Any help would be greatly appreciated. Thanks

UPDATE TO MY PLAY PAUSE HANDLER I have found a workaround even though I feel there is a better way. I am now calling Audio.setIsEnabledAsync(false); as a cleanup function.

I'm attempting to implement useContext in various areas of my application starting with the below.

This excerpt references four separate part of the UI that nonetheless require information relating to an event. At the moment I'm prop drilling and would like to get rid of this. Given all the examples I'm confused as to whether I can declare the context within the area of the excerpt, or if it should be a separate file. And other questions like how do you manage contexts within a mapped loop.

In the below case I'm looking for some kind of filteredEntryContext (or for less confusion entryContext).

This context needs to be consumed by EntryIcon, TypeIcon, FavIcon, NewIcon and GovIcon.

I'm attempting to pass a variable to a function in react so as to do some conditional rendering.

The main function TypeIcon calls the function iconSwitch and attempts to pass a variable.

If I render the text passed in the original props as {props.type} this renders fine. I just can't seem to pass it to the function. Or perhaps call the function correctly.