My audios from firebase realtime database are not playing using touchable opacity in react native after certain iterations/count

Question

I have 29 pronunciations stored in firebase storage and then from there with the help of access token, they're stored in realtime database. In UI, I've touchable opacity (in react native) to play those pronunciations one after the other in order. All pronunciations are getting played really fine and correctly till the 20th pronunciation but as long as i come at the 21st pronunciation, nothing is getting played from there onwards i have no idea why (by the way I have next and back buttons to show my data in order from database). But my other data (Text and images) is displayed correctly and normally, there's only a problem with audios. Can someone help me how to solve this problem? Also I have the same problem whether I use ref().on or ref().once. Here's the code given below:

import React from "react";
import Sound from "react-native-sound";
import database from '@react-native-firebase/database';
import {View, StyleSheet, Text, Image,  ToastAndroid, Modal, TouchableOpacity} from 'react-native';
import { useState } from "react";
import { useEffect } from "react";

export default alphl=({navigation})=> {


    const [myData,setData] = useState({
        letter:'',
        word:'',
        wmeaning:'',
        wimage:'',
        apronun:'',
        wpronun:'',  
      });
      const [show, setshow]=useState(false);
      const [wait, setwait]=useState();
      const [img,setimg] = useState(null);
      const [apronunn,setapronun] = useState(null);
      const [wpronunn,setwpronun] = useState(null);
     const [hey,sethey] = useState(1);
      function inchey(){
       sethey(hey + 1);
     }
    
      function decchey(){
      sethey(hey - 1);
    }
    
    
      useEffect(() => {
        ToastAndroid.showWithGravity('Wait! Loading...', ToastAndroid.LONG, ToastAndroid.CENTER);
      
        getDatabase(); 
         
      }, [hey]);
      

      function getDatabase() {
        database().ref('alphabets/'+hey+'/').once('value' , (snapshot) => {
        console.log(snapshot.val());
     // Sound.setCategory('Playback', true);
     setwait(true);
          var poo=new Sound(snapshot.val().apronun);
          var pooo=new Sound(snapshot.val().wpronun);
          setData({
            letter: snapshot.val().letter,
            word: snapshot.val().word,
            wmeaning: snapshot.val().wmeaning,
            wimage: setimg(snapshot.val().wimage),
            apronun: setapronun(poo),
            wpronun: setwpronun(pooo)
          });
         
          setwait(false);  
        });
      //  database().ref().off();
      }

return (

 <Text style={styles.lettertext}>
           {myData ? myData.letter : 'loading...' }
          </Text>

          <TouchableOpacity onPress={() => {
            
               return apronunn.play();
               
             }}
             disabled={wait}
            style={styles.button}
            >
                <Text style={styles.buttontext}>Letter Pronunciation</Text>
            </TouchableOpacity>

    
          <Text style={styles.toptext}>
            Word: {myData ? myData.word : 'loading...' }
          </Text>
          <Text style={styles.toptext}>
          Meaning: {myData ? myData.wmeaning : 'loading...' }
          </Text>


          <TouchableOpacity onPress={() => {
              return wpronunn.play();
          }}
          disabled={wait}
            style={styles.button}
            >
                <Text style={styles.buttontext}>Word Pronunciation</Text>
            </TouchableOpacity>

         
          <Image style={{width:200, height:200, borderRadius:10, marginBottom:15}} 
          source={{uri: img}} 
            />
           <View>


           <TouchableOpacity onPress={ () => {
                 if (hey>28) {
                  ToastAndroid.showWithGravity('Error! This is the last alphabet', ToastAndroid.CENTER, ToastAndroid.CENTER);  
                 }
                 else {
               inchey();
               }
              }}
             
            style={styles.buttonnb}
            >
                <Text style={styles.buttontext}>Next</Text>
            </TouchableOpacity>


            <TouchableOpacity onPress={ async () =>  {
                 if (hey<2) {
                  ToastAndroid.showWithGravity('Error! Can not go back further', ToastAndroid.CENTER, ToastAndroid.CENTER); 
                 }
                 else {
               decchey();
                 }
               }}
               
            style={styles.buttonnb}
            >
                <Text style={styles.buttontext}>Back</Text>
            </TouchableOpacity>


       <TouchableOpacity onPress={() => navigation.navigate('alpht')}
      style={styles.button}
      >
        <Text style={styles.buttontext}>Give Test</Text>
      </TouchableOpacity>
      </View>
     </View>
      );
}