React Native useContext results are undefined - react-native

Question

I am trying to useContext provider in my midiMonitor function. The midi monitor function is a helper function. The issue is that the context results as undefined because it's not inside the profile context. I am trying to figure out how to give the midiMonitor access to the profileContext. I know it can be done if I import the helper function inside the home component however I don't want to import it in the home component because it has nothing the do with the home component.
Is there another way I can use the midiMonitor helper function and have access to the contents of the profileContext
const App = () => {
midiMonitor()
return(
<ProfileProvider>
<Home />
</ProfileProvider>
)
}
const Home = () => {
// some functions that have access to the Profile Provider
const {profileName} = useContext(ProfileContext)
return(
<View>
<Text>{profileName}</Text>
</View>
)
}
const midiMonitor = () => {
const {profileName} = useContext(ProfileContext)
if (profileName === 'default'){
// results are undefined. I know why but do not want to
//import in into the Home component as it has nothing to do with the home component
console.log('you are using default midi profile')
}
}

Answer 1

It would have been easier if you could "ProfileContext" and "ProfileProvider". Here is an example of the same. Hope this helps.
import { useState, createContext, useContext } from "react";
import ReactDOM from "react-dom/client";
const ProfileContext = createContext();
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<ProfileContext.Provider value={user}>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</ProfileContext.Provider>
);
}
function Component2() {
return (
<>
<h1>Component 2</h1>
<Component3 />
</>
);
}
function Component3() {
return (
<>
<h1>Component 3</h1>
<Component4 />
</>
);
}
function Component4() {
return (
<>
<h1>Component 4</h1>
<Component5 />
</>
);
}
function Component5() {
const user = useContext(ProfileContext);
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Component1 />);