useEffect with async function to play sound not working - reactjs

Question

I am trying to play background music in a React Native/Expo app as soon as the homeScreen loads.
Using expo AV library, I set up a MusicContext with a method to start the music. Here is my MusicContext.js
import React, {
useState,
useCallback,
useMemo,
useContext,
useEffect,
} from "react"
import PropTypes from "prop-types"
import { Audio } from "expo-av"
const initialState = {
playMusic: false,
setPlayMusic: () => null,
}
export const MusicContext = React.createContext(initialState)
const startMusic = async () => {
let mainTheme = null
if (!mainTheme) {
mainTheme = new Audio.Sound()
try {
console.log("trying")
await mainTheme.loadAsync(require("../assets/sounds/MainTheme.mp3"))
mainTheme.setStatusAsync({ isLooping: true })
} catch (error) {
console.log("Couldnt load main theme")
return
}
}
}
export const MusicProvider = props => {
const [playMusic, setPlayMusic] = useState(initialState.playMusic)
return (
<MusicContext.Provider
value={{
playMusic,
setPlayMusic,
startMusic,
}}
>
{props.children}
</MusicContext.Provider>
)
}
MusicContext.propTypes = {
children: PropTypes.node.isRequired,
}
I then call the the startMusic method in useEffect on my home screen.
const HomeScreen = () => {
const { startMusic } = useContext(MusicContext)
useEffect(() => {
console.log("running")
startMusic()
}, [])
I see all of the console.log output so I know it is running, but the music never plays. What am I missing here?

Answer 1

Is there a reason you aren't putting the startMusic in initialState?
When I put the function in the initalState, it gets called properly.
To answer your question more generally, you either need to wrap an aysnc function in an IIFE or have it as a separate function that is called.
I usually wrap as IIFE.