How to change pause icon to play when music is completed in react native using expo-av

Question

currently onClick, the music will play/pause. I want to change the icon from pause to play to when music is completely played, but it isn't changing unless I click on the pause icon. I was thinking of setting a setTimeout based on the milliseconds of the audio, but it's going over my head. Please help me change the value of state.isPlaying on completion of the music. Please help! newbie here

  state = {
    isPlaying: false,
    playbackInstance: null,
    currentIndex: 0,
    volume: 4.0,
    isBuffering: false,
  };

  componentDidMount = async () => {
    try {
      await Audio.setAudioModeAsync({
        allowsRecordingIOS: false,
        interruptionModeIOS: Audio.INTERRUPTION_MODE_IOS_DO_NOT_MIX,
        playsInSilentModeIOS: true,
        interruptionModeAndroid: Audio.INTERRUPTION_MODE_ANDROID_DUCK_OTHERS,
        shouldDuckAndroid: true,
        staysActiveInBackground: true,
        playThroughEarpieceAndroid: true,
      });

      this.loadAudio();
    } catch (e) {
      console.log(e);
    }
  };

  loadAudio = async () => {
    console.log("@@@@", audios[0]["uri"]);
    const { currentIndex, isPlaying, volume } = this.state;

    try {
      const playbackInstance = new Audio.Sound();
      const source = {
        uri: audios[currentIndex]["uri"],
      };
      const status = {
        shouldPlay: isPlaying,
        volume,
      };

      playbackInstance.setOnPlaybackStatusUpdate(this.onPlaybackStatusUpdate);
      await playbackInstance.loadAsync(source, status, false);
      this.setState({ playbackInstance });
    } catch (e) {
      console.log(e);
    }
  };

  onPlaybackStatusUpdate = (status) => {
    this.setState({
      isBuffering: status.isBuffering,
    });
  };

  handlePlayPause = async () => {
    const { isPlaying, playbackInstance } = this.state;
    isPlaying
      ? await playbackInstance.pauseAsync()
      : await playbackInstance.playAsync();
    this.setState({
      isPlaying: !isPlaying,
    });
  };

render() {
    return (
      <View>
 
        <View style={styles.controls}>
         
          <TouchableOpacity      
            onPress={this.handlePlayPause}
          >
            {this.state.isPlaying ? (
              <Ionicons name="ios-pause" size={48} color="#444" />
            ) : (
              <Ionicons name="ios-play-circle" size={48} color="#444" />
            )}
          </TouchableOpacity>   
      </View>
    );
  }

Thanks in advance!