I'm trying to print the data I get from my database but I can't think of how to get the data variable and use it in renderItem(). I've already managed to create keys through useState to use in map(), I just wanted to know a way to get these variables out of useState and be able to use them in react-agenda

import React, { useEffect, useState } from 'react'
import { StyleSheet, View, Text, TouchableOpacity, Modal, TextInput, Alert } from 'react-native'
import { LocaleConfig, Agenda } from 'react-native-calendars'
import DateTimePicker from 'react-native-modal-datetime-picker';

import { getAuth } from 'firebase/auth';
import { getDatabase, ref, onValue, set, push, get, child } from 'firebase/database';

const Calendario = () => {

  const [modalVisible, setModalVisible] = useState(false);
  const [events, setEvents] = useState('');
  const [dateSelected, setDateSelected] = useState('');
  const [description, setDescription] = useState('');
  const [refreshCalender, setRefreshCalender] = useState(false);
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);

  const [data, setmyData]=useState({})

  const db = getDatabase();
  const app = getAuth();
  const refe = ref(db, 'users/' + app.currentUser.uid);
  const dbRef = ref(db);


  const renderItem = (item, data) => {
    return(
      data.map(() => {
      <View style={styles.itemContainer}>
        <Text id={item["$key"]} style={styles.textInf}>{item.title}</Text>
        <Text style={styles.textInf}>{item.details}</Text>
    </View>
    })
    )
  }
  const storeInDB = () => {
    push(refe, {
      date: strDate,
      title: events,
      details: description
    });
  }

  useEffect(()=>{
    onValue(ref(db, 'users/' + app.currentUser.uid), snapshot =>{
      let data = [];
      snapshot.forEach(childsnap => {
        let val = childsnap.val();
        val['$key'] = childsnap.key;
        data.push(val);
      });
      setmyData(data);
    })
  },[]);

  return (
    <>
        <Agenda
          //items={ dataF }
          renderEmptyDate={() => {
            return <View />;
          }}
          renderEmptyData={() => {
            return <View />;
          }}
          selected={new Date()}
          minDate={null}
          renderItem={renderItem}
          markingType="custom"
          refreshing={refreshCalender}
        />
    </>
  )
}

export default Calendario

Data from firebase: