componentDidMount not retrieving asyncStorage data

I have an app with a playlist of videos. As each video plays, I get the index of the video, save it in state, and save it in AsyncStorage. Yet, when I reload the app, I get the current index of the now playing video instead of the indexes saved before reload. This is on ios simulator. This is my code:

import React, {Component} from 'react';
import {StyleSheet, View, SafeAreaView, Button} from 'react-native';
import YouTube from 'react-native-youtube';
import {withNavigationFocus} from 'react-navigation';
import AsyncStorage from '@react-native-community/async-storage';
import APIKEY from '../Keys/ApiKey';

let videoIdsList = [
  '_Czxy3nya8Y',
  '8V0HETilr4I',
  'tHa260XXH6U',
  'J3iSEq5Apfg',
  'iCc5l8iWUZs',
  'p8UR4dODogI',
  'HoL1csZPYsk',

];

class MemeRadar extends Component {
  state = {
    play: false,
    loop: false,
    videosPlayed: [],
    arrayUponMount: [],
    resetAsyncStorage: false,
  };

  _youTubeRef = React.createRef();

  async componentDidMount() {
    this.setState({
      videoIds: videoIdsList,
      play: false,
    });
    try {
      const value = await AsyncStorage.getItem('@PlayList');
      if (value !== null) {
        console.log(JSON.parse(value));
        this.setState(
          {
            videosPlayed: [JSON.parse(value)],
          },
          () => {
            console.log(JSON.parse(value));
          },
        );
      }
    } catch (error) {
      console.log(error);
    }
  }

  async componentDidUpdate(prevProps, prevState) {
    if (prevProps.isFocused !== this.props.isFocused) {
      this.setState({
        play: this.state.play === false ? true : false,
      });
    }

    try {
      if (this._youTubeRef.current._isReady) {
        await this._youTubeRef.current
          .getVideosIndex()
          .then(index => {
            this.state.videosPlayed.includes(index) || null
              ? null
              : this.setState(
                  {
                    videosPlayed: [...this.state.videosPlayed, index],
                  },
                  () => {
                    console.log(this.state.videosPlayed);
                    console.log('saving');
                    AsyncStorage.setItem(
                      '@PlayList',
                      JSON.stringify(...this.state.videosPlayed),
                    );
                    console.log('saved');
                  },
                );
          })
          .catch(err => console.log(err));
      }
    } catch (error) {
      console.log(error);
    }


  }```

I read this was an issue that others face that is being looked at, yet, is there a way around this?
thanks!