База данных firebase в реальном времени не извлекается с помощью onPress в родном реагировании, необходимо каждый раз обновлять функцию ref().on

У меня есть база данных в реальном времени с основным узлом «пользователь», а затем внутри нее у меня есть 3 дочерних узла, и у этих 3 дочерних узлов есть еще 4 дочерних узла, каждый из них. Один из 4 узлов — запись, один — изображение и 2 — строки. Я пытаюсь получить их динамически с помощью кнопок «Далее» и «Назад», где при нажатии «Далее» данные следующего узла отображаются на экране.

Я использую useState для динамического изменения пути к базе данных (ref), но при нажатии кнопки «Далее/Назад» мои данные на экране не обновляются. Также позже я обнаружил, что после нажатия кнопки «Далее/назад», когда я обновляю/переписываю функцию ref().on, мои данные обновляются, но я должен делать это при каждом нажатии.

Вот мой код App.js:

import Sound from 'react-native-sound';
import database from '@react-native-firebase/database';
import storage from '@react-native-firebase/storage';
import React , {useEffect, useState} from 'react';
import {
  ScrollView,
  StyleSheet,
  Alert,
  Text,
  View,
  Image,
  Button
} from 'react-native';

const App = () => {
 
  const [myData,setData] = useState({
    letter:'',
    pronun:'',
    word:'',
    image:''
  });
  const [img,setimg] = useState(null);
  const [pronunn,setpronun] = useState(null);
  const [hey,sethey] = useState(1);


  useEffect(() => {
    getDatabase();   
}, []);
  
  function getDatabase() {
    
database().ref('users/'+hey+'/').on('value' , (snapshot) => {
  Sound.setCategory('Playback', true);
  var poo=new Sound(snapshot.val().pronun);
  setData({
    letter: snapshot.val().letter,
    word: snapshot.val().word,
    image: setimg(snapshot.val().image),
    pronun: setpronun(poo)
  });
  console.log(snapshot.val());
});
 }

  return (

<View style={{flex:1, backgroundColor:'#000000', alignContent:'center', alignItems:'center', justifyContent:'center'}}>
  

      <ScrollView>
      <Text style={{color:'#ffff'}}>
    Letter: {myData ? myData.letter : 'loading...' }
  </Text>

  <Text style={{color:'#ffff'}}>
    Word: {myData ? myData.word : 'loading...' }
  </Text>
  <Image style={{width:200, height:200}} 
  source={{uri: img}} 
    />

   <View>
     <Button
     title='Pronunciation'
     onPress={() => {
       return pronunn.play();
     }}
     >

     </Button>

     <Button title='Next' onPress={
       
       () => {
         if (hey>2) {
          Alert.alert('no more records');
         }
         else {

       return sethey(hey+1);
  
         }
       }
      }
       >

       </Button>

       <Button title='back' onPress={
       
       () => {
         if (hey<2) {
          Alert.alert('no more records to go back');
         }
         else {
       return sethey(hey-1);
         }
       }
      }
       >

       </Button>
       </View>
      </ScrollView>

    </View>
);
};

export default App;