reactjs – Use effect how is the inner function executed prior to outer function?

Below is a modified example from https://docs.expo.io/versions/latest/sdk/audio/ for iterating between the two sounds when play button is pressed.

In this example use effect is in charge of unloading the sound if its present. And looks like

  React.useEffect(() => {
    console.log(`INSIDE: useEffect.`);

    return sound
      ? () => {
        console.log('Unloading Sound');
        sound.unloadAsync();
      }
      : undefined;
  }, (sound));

The console output looks like:

--------------------------------------------------------------------------------
Play Button pressed.
Loading Sound
BEFORE: await sound.playAsync()
Unloading Sound
INSIDE: useEffect.
AFTER: await sound.playAsync()

Why does Unloading Sound come before INSIDE: useEffect.?

import * as React from 'react';
import { View, Button } from 'react-native';
import { Audio } from 'expo-av';
import { Sound } from "expo-av/build/Audio/Sound";

const URIS = (
  'https://s3.amazonaws.com/exp-us-standard/audio/playlist-example/Podington_Bear_-_Rubber_Robot.mp3',
  "https://ia800304.us.archive.org/34/items/PaulWhitemanwithMildredBailey/PaulWhitemanwithMildredBailey-AllofMe.mp3"
)

let uriIndex = 0;


function getUri() {
  uriIndex++;
  if (uriIndex == URIS.length){
    uriIndex = 0;
  }

  return URIS(uriIndex);
}

export default function SoundApp() {
  const (sound, setSound) = React.useState<Sound>();


  async function playSound() {
    console.log('Loading Sound');
    let URI = getUri();
    const {sound} = await Audio.Sound.createAsync(
      {uri: URI}
    );
    setSound(sound);

    console.log(`BEFORE: await sound.playAsync()`);
    await sound.playAsync();
    console.log(`AFTER: await sound.playAsync()`);

  }

  React.useEffect(() => {
    console.log(`INSIDE: useEffect.`);

    return sound
      ? () => {
        console.log('Unloading Sound');
        sound.unloadAsync();
      }
      : undefined;
  }, (sound));

  return (
    <View style={{}}>
      <Button title="Play Sound" onPress={() => {
        console.log(`--------------------------------------------------------------------------------`);
        console.log(`Play Button pressed.`);
        playSound()
      }}/>

      <Button title={'STOP'} onPress={
        () => {
          sound?.unloadAsync();
        }
      }/>
    </View>
  );
}