React native – data.map is not a function (it is undefined)

I’m making a recipe app with React Native and Firebase. I added some JSON data to realtime database before. It works well with arr.map(). But when I write a data to realtime database with my project it says data.map is not a function

Here is the code that i made my calls from realtime database

import { ScrollView, SafeAreaView, FlatList } from "react-native";
import React, { useEffect, useState } from "react";
import { ref, onValue } from "firebase/database";
import { database } from "../firebaseConfig";
import HomepageCard from "../components/HomepageCard";

export default function AllRecipes() {
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState([]);

  function getData() {
    const db = database;
    const recipes = ref(db, "tarifler/");
    onValue(recipes, (snapshot) => {
      setData(snapshot.val());
    });
    setIsLoading(false);
  }

  useEffect(() => {
    getData();
  }, []);
  return (
    <SafeAreaView>
      <ScrollView contentContainerStyle={{ alignItems: "center" }}>
data.map((recipe) => {
              const { ad, id, gorsel, kategori } = recipe;
              return (
                <HomepageCard
                  key={id}
                  ad={ad}
                  gorsel={gorsel}
                  kategori={kategori}
                />
              );
            }) </ScrollView>
    </SafeAreaView>
  );
}

Here is my write data to realtime database component

import { View, Text, Pressable, Alert } from "react-native";
import React, { useState } from "react";
import { ScrollView, TextInput } from "react-native-gesture-handler";
import { ref, set } from "firebase/database";
import { database } from "../firebaseConfig";
import "react-native-get-random-values";
import { nanoid } from "nanoid";

export default function AddRecipe() {
  const id = nanoid();
  const [data, setData] = useState({
    ad: "",
    gorsel: "",
    kategori: "",
    tarif: "",
    malzemeler: "",
  });
  const handleOnPress = () => {
    const db = database;
    set(ref(db, "tarifler/" + id), {
      id: id,
      ad: data.ad,
      kategori: data.kategori,
      gorsel: data.gorsel,
      yapılış: data.tarif,
      malzemeler: data.malzemeler.split(","),
    });
    
  };
  return (
    <ScrollView style={{ flex: 1 }} className="bg-white gap-y-6 px-5 pt-10">
      <Text className="text-2xl font-bold">Add Recipe</Text>
      <View className="gap-y-5">
        <TextInput
          onChangeText={(val) => (data.ad = val)}
          className="text-xl p-4 bg-[#F6F6F6] rounded-xl"
          placeholder="Ad"
        />
        <TextInput
          onChangeText={(val) => (data.gorsel = val)}
          className="text-xl p-4 bg-[#F6F6F6] rounded-xl"
          placeholder="Görsel Linki"
        />
        <TextInput
          onChangeText={(val) => (data.kategori = val)}
          className="text-xl p-4 bg-[#F6F6F6] rounded-xl"
          placeholder="Kategori"
        />
        <TextInput
          onChangeText={(val) => (data.tarif = val)}
          multiline={true}
          numberOfLines={6}
          className="text-xl h-[200px] p-4 bg-[#F6F6F6] rounded-xl"
          placeholder="Tarif"
        />
        <TextInput
          onChangeText={(val) => (data.malzemeler = val)}
          multiline={true}
          numberOfLines={6}
          className="text-xl h-[200px] p-4 bg-[#F6F6F6] rounded-xl"
          placeholder="Malzemeler"
        />
      </View>
      <Pressable onPress={handleOnPress} className="bg-pink-600 rounded-full">
        <Text className="text-center text-xl font-medium text-white py-3">
          Tarifi Ekle
        </Text>
      </Pressable>
    </ScrollView>
  );
}

When I removed the new added data from realtime database its work properly again