Correctly toggling playback state using react-native-track-player for live audio streaming React Native app (shoutcast)

Question

I can't seem to get react-native-track-player fully working in my radio streaming app (shoutcast). The TouchableOpacity I use to toggle the playback seems to only work after the second press.. Even then, the toggle doesn't seem to work reliably. I think I have the logic set up incorrectly..

I also realize that I should be updating MetaData via react-native-track-player, rather than the custom hook that I wrote.

If anyone can point out my errors, I'd appreciate it! Thanks in advance

Using:

• React Native 0.60.5
• react-native-track-player 1.2.4

home screen logic:

...

  const [playingState, setState] = useState(true)
  const [song, setSong] = useState('');
  const [musician, setMusician] = useState('');
  
  useEffect(() => {
      let repeat;
      async function fetchData() {
          try {
              const res = await fetch(" * my API url ");
              const json = await res.json();
              setSong(json.data[0].track.title);
              setMusician(json.data[0].track.artist);
              repeat = setTimeout(fetchData, 26000);
          } catch (error) {
              console.error(error.message)
          }
      }
      fetchData();
      return () => {
          if (repeat) {
              clearTimeout(repeat);
          }
      }
}, []);

var songTitle = JSON.stringify(song)
var musicianName = JSON.stringify(musician)

const playbackState = usePlaybackState();

async function setup() {
  await TrackPlayer.setupPlayer({});
  await TrackPlayer.updateOptions({
    stopWithApp: true,
    capabilities: [
      TrackPlayer.CAPABILITY_PLAY,
      TrackPlayer.CAPABILITY_PAUSE,
      TrackPlayer.CAPABILITY_STOP
    ],
    compactCapabilities: [
      TrackPlayer.CAPABILITY_PLAY,
      TrackPlayer.CAPABILITY_PAUSE
    ]
  });
}
  useEffect(() => {
    setup();
  }, []);

  async function togglePlayback() {
    const currentTrack = await TrackPlayer.getCurrentTrack();
    if (currentTrack == null) {
      await TrackPlayer.reset();
      await TrackPlayer.add({ 
        id: 0,
        title: songTitle,
        url: " my audio stream URL ",
        artist: musicianName,
        album: null,
        date: null,
        genre: null}
        );
      await TrackPlayer.play();
    } else {
      if (playbackState === TrackPlayer.STATE_PAUSED) {
        setState(!playingState)
        await TrackPlayer.play();
      } else {
        await TrackPlayer.pause();
      }
    }
  }

...

main screen front end:

...

  <TouchableOpacity
    onPress={() => togglePlayback()}
    style={[
        styles.playButtonContainer,
        screenData.isLandscape && styles.playButtonContainerLandscape
    ]}>
    {playingState ? (
        <View style={{ alignContent: 'center', justifyContent: 'center' }}>
            <Image
                source={playButton}
                style={styles.playPauseButton}
                resizeMode='contain'
            />
        </View>
    ) : (
            <View style={{ alignContent: 'center', justifyContent: 'center' }}>
                <Pulse color='white' numPulses={3} diameter={400} speed={20} duration={2000} 
                 style={{ alignSelf: 'center', opacity: 50, zIndex: 0 }} />
                <Image
                    source={pauseButton}
                    style={styles.playPauseButton}
                    resizeMode='contain'
                />
                <LottieView
                    source={visualizer}
                    autoPlay
                    loop
                    style={{
                        zIndex: 1,
                        width: screenWidth,
                        height: 200,
                        position: 'absolute',
                        alignSelf: 'center'
                    }}
                    isPaused={false}
                />
            </View>
        )}
</TouchableOpacity>
{
    playingState ? (
        <Text
            style={styles.trackTitle}>{''}</Text>
    ) : (
            <Text
                style={styles.trackTitle}>{song}</Text>
        )
}
{
    playingState ? (
        <Text style={styles.tuneInTitle}>Tap the play button to tune in</Text>
    ) : (
            <Text style={styles.artistName}>{musician}</Text>
        )
}

...