Problem with loading data to a React Native usestate

I put them in context, I am developing an app for a cookbook, I am entering the recipes into the app. for which I have 3 usestates, two to interact with the 2 input that data must be entered and one that interacts with the event of the button called onPressButton, which is saved in an object, I do a console.warn(nameRepice, direction, Recipes ) but I get the data of the first 2 and it shows me [] empty. I'd appreciate it if you could guide me what I'm doing wrong.

Code:Problem with loading data to a React Native usestate

import { ActivityIndicator, FlatList, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import React, {useState} from 'react';

import Botones from '../components/buttons';
import Color from '../constants/colors';
import Menu from '../components/menu';
import TextBox from '../components/textBox';

const addRecipes = () => {

  //useState
  const [nameRecipe, setNameRecipe] = useState('');
  const [description, setDescription] = useState('');
  const [recipes, setRecipes] = useState([]);
  //funciones

  const date = () => {
    const date = Date.now();
    const hoy = new Date(date);
    const day = hoy.toDateString();
    return day;
  }

  const onChangeTextNameRecepe = (text) => { setNameRecipe(text.replace(/[^ a-zA-Z ]/g, '')) }; // Validar solo texto
  const onChangeTextDescription = (text) => { setDescription(text.replace(/[^ a-zA-Z ]/g, '')) };// Validar solo numeros
  const onPressButton = () => {
    if (recipes != '' && description != '') {
      setRecipes([...recipes, { id: Date.now().toString(), name: nameRecipe, description: description }]);
      setNameRecipe('');
      setDescription('');
    }
    console.warn(nameRecipe, description );
  };

  const renderItem = ({item}) => (
    <View style={styles.itemContainer}>
      <Text style={styles.itemText}>{item.nameRecipe + ' - ' + item.description + ' - ' + item.date}</Text>
      <View style={styles.itemButtons}>
        <TouchableOpacity onPress={() => deleteItem(item.id)}>
          <Text style = { styles.itemTextButton}>Del...</Text>
        </TouchableOpacity>
      </View>
    </View>
  )

  const deleteItem = (id) => {
    const newRecipes = recipes.filter((item) => item.id != id);
    setRecipes(newRecipes);
  };

  return(
    <View style = {styles.container}>
      
      <Menu/>

      <View style={styles.textContainerTitle}>
        <Text style={styles.textTitle}>Agregar Receta </Text>
      </View>

      <View style = {styles.TextInputContainer} >
        <TextBox placeholder = 'Nombre de la receta' onChangeText = {onChangeTextNameRecepe} value = {recipes} />
        <TextBox placeholder = 'Descripcion' onChangeText = {onChangeTextDescription} value = {description} />
      </View>
      <View style = {styles.textContainerTitle2}>
        <Text style = {styles.date}>{date()}</Text>
      </View>

      <View style={styles.buttonContainer}>
        <Botones title="Agregar" bkcolor={Color.primary} color={Color.letter} onPress={onPressButton} />
      </View>
    
      <View style={styles.flatListContainer}>
        <FlatList
          data={recipes}
          renderItem={renderItem}
          keyExtractor={item => item.id}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Color.primary,
    color: Color.letter,     
    fontFamily: 'Lato-Regular',
  }, 

  textContainerTitle: {
    marginTop: 10,
    marginLeft: 20,
    alignItems: 'center',
  },

  textContainerTitle2: {
    marginTop: 10,
    marginLeft: 20,
    marginStart: 20,
    alignItems: 'flex-start',
  },

  textTitle: {
    color: Color.letter,
    fontSize: 30,
    fontWeight: 'bold',
  },

  date: {
    top: 5,
    fontSize: 20,
    color: Color.letter,
  },


  TextInputContainer: {
    marginTop: 40,
    marginHorizontal: 20,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  
  buttonContainer: {
    width: '100%',
    alignItems: 'center',
    marginTop: 20,
    marginBottom: 10,
    height: 33,
  },


  itemButtons: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    width: 60,
  },

  itemContainer: {
    backgroundColor: Color.letter,
    padding: 15,
    marginVertical: 8,
    marginHorizontal: 20,
    color: Color.primary,
    fontSize: 15,
    borderRadius: 5,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },

  itemText: {
    textDecorationLine:'none',
  },

});

export default addRecipes;