Не удается заставить кнопки воспроизведения и паузы работать должным образом с iFrame

Я пытался встроить случайные видео YouTube из массива в свое приложение React Native. Пока это работает хорошо, каждый раз, когда я перехожу на другой экран, а затем обратно, появляется другое видео! Теперь я пытаюсь реализовать внешние кнопки паузы/воспроизведения! Они хорошо работают, когда в массиве есть только одна ссылка на YouTube! Однако, если я добавлю другие ссылки, кнопки воспроизведения / паузы начнут глючить, и каждый раз, когда я нажимаю одну, она либо ничего не делает, либо ведет к другому видео, либо приостанавливает видео! Я не думаю, что это случайно, кажется, есть система того, что не работает, но я просто не могу понять это! Можно предположить, что проблема связана с состояниями «воспроизведения» и что иногда видео не воспроизводится, даже если оно воспроизводится === true? Ну, ИДК, может быть, кто-то из вас может помочь! вот код:

import React, { useState, useCallback, useRef } from "react";
import { Button, View, Alert, Text } from "react-native";
import YoutubePlayer from "react-native-youtube-iframe";
import {NeuView, NeuButton} from 'react-native-neu-element';
import { set } from "react-native-reanimated";
//import {LinearGradient} from 'expo-linear-gradient';
//import {LinearGradient} from 'react-native-linear-gradient';

//example vids
const videos = [
  'iNQAp2RtXBw',
  'AJqiFpAl8Ew',
  'IdoD2147Fik',
]

const randomVideo = () =>
videos[Math.floor(Math.random() * videos.length)];

export default function funnyVideos() {
  const [playing, setPlaying] = useState(false);

  function pause() {
    if (playing === true) {
      setPlaying(false)
    }
  }
  function play() {
    if (playing === false) {
      setPlaying(true)
    }
  }
  
    
 

return (
    <View  alignItems = 'center' >
      <NeuView style = {{marginTop: '15%'}}  width = {330} height = {200} color = '#f2f2f2' borderRadius = {20} >
        <View overflow = 'hidden' height = {169}  style = {{position: 'relative', marginTop: 0}} justifyContent = 'center' alignContent = 'center' borderRadius = {10}> 

          <YoutubePlayer
            height = {'100%'}
            width = {300}
            videoId = {randomVideo()}
            play = {playing}
          />
      </View>
    </NeuView>
    
    <View flexDirection = 'row'>
      <NeuButton style = {{marginTop: 60, marginRight: 45}}  width = {100}  height = {100} color = '#f2f2f2' title = {playing ? "pause" : "play"} onPress = {play} borderRadius = {20}>
        <Text>
          play
        </Text>
      </NeuButton>
      <NeuButton style = {{marginTop: 60}}  width = {100}  height = {100} color = '#f2f2f2' title = {playing ? "pause" : "play"} onPress = {pause} borderRadius = {20}>
        <Text>
          pause
        </Text>
      </NeuButton>
    </View>
      <NeuButton style = {{marginTop: 45}} width = {250}  height = {100} color = '#f2f2f2' title = {playing ? "pause" : "play"} borderRadius = {20}>
        <Text>
          Next Video
        </Text>
      </NeuButton>

    
    </View>
  ); 
}