React Native "View config getter callback for component 'input' must be a function" and "Text strings must be rendered within <Text> component" mobile

Question

I'm making a react native app where the user will push a button (displayed via the render buttons function) and then a modal will pop up containing a form, creating using react hook form. All of this works on the web testing, but when testing on an actual phone (ios), I get an error saying Text strings must be rendered within a <Text> component As well as this other invariant violation error:

My code is as follows:

import React, {useState, useEffect} from 'react';
import { View, Text, Button, Alert, Modal, Pressable, TextInput } from 'react-native';
import { globalStyles } from '../styles/global';
import { useForm } from "react-hook-form";

export default function IngredientScreen({ navigation }) {
    const [modalVisible, setModalVisible, modal2Visible] = useState(false);
    const [text, setText] = useState(' ');
    const { watch, formState: { errors } } = useForm();
    const [ingredientsPair, setIngredientPair] = useState({ingredient: "", category: "", delete: ""});
    const { register, handleSubmit,  reset } = useForm({
      defaultValues: ingredientsPair,
    });

    //List out ingredients with categories? Prepopulated for now
    var ingredientList = [
        {
            category: "Cooking & Baking Ingredients",
            items: ["Flour"]
        },
        {
            category: "Dips & Spreads",
            items: ["Cream Cheese"]
        },
        {
            category: "Fresh & Frozen Fruits",
            items: ["Passion Fruit", "Apples"]
        },
        {
            category: "Grains, Rice & Cereal",
            items: ["Millet"]
        },
    ];
    
    function RenderButtons() {
      return ingredientList.map(buttonInfo => (
        <>
          <Text >{buttonInfo.category}</Text>
          {buttonInfo.items.map((item) => {
            var orginalIngredient = item;
            return (
              <View>
                  <Modal
                    animationType="slide"
                    transparent={true}
                    visible={modalVisible}
                    onRequestClose={() => {
                      Alert.alert("Modal has been closed.");
                      setModalVisible(!modalVisible);
                    }}
                  >
                    <View style={globalStyles.centeredView}>
                      <View style={globalStyles.modalView}>
                        <form onSubmit={handleSubmit(editIngredient)}>
                          <label style={{fontSize: 12, fontWeight: 'bold', color: '#333', fontFamily: 'raleway-bold',}}>
                            Are you deleting this ingredient?
                          </label>
                          <select {...register("delete")} style={{width: 70}}>
                            <option value="Yes">Yes</option>
                            <option value="No">No</option>
                          </select>
                          <Text>{'\n'}</Text>
                          <Text style={globalStyles.h6}>Edit your ingredient here</Text>
                          <input 
                            {...register("ingredient")} 
                            placeholder="Input your ingredient"
                          />
                          <select {...register("category")}>
                            <option value="Condiments & Sauces">Condiments & Sauces</option>
                            <option value="Cooking & Baking Ingredients">Cooking & Baking Ingredients</option>
                            <option value="Dips & Spreads">Dips & Spreads</option>
                            <option value="Fresh & Frozen Fruits">Fresh & Frozen Fruits</option>
                            <option value="Fresh & Frozen Vegetables">Fresh & Frozen Vegetables</option>
                            <option value="Grains, Rice & Cereal">Grains, Rice & Cereal</option>
                          </select>
                          <Pressable
                          style={[globalStyles.button, globalStyles.buttonClose]}
                          onPress={handleSubmit(editIngredient)}
                          type="submit"
                          >
                            <Text style={globalStyles.buttonText}>Submit</Text>
                          </Pressable>
                        </form>
                      </View>
                    </View>
                  </Modal>
                  <Pressable
                    style={[globalStyles.button, globalStyles.buttonOpen]}
                    onPress={() => {setModalVisible(true)}
                  >
                    <Text style={globalStyles.buttonText} key={item}>{item}</Text>
                  </Pressable>
                </View>
            );
          })}
        </>
      ));
    }

    const editIngredient = (data) => {
      setModalVisible(!modalVisible)
      ingredientList.forEach(item => {
        if (data.category == item.category) {
          for (var i=0; i < item.items.length; i++) {
            if (data.ingredient == item.items[i]) {
              if (data.delete == "Yes") {
                //Change to connect with users
                item.items.splice(i,1);
                alert(item.items);
                break
              } else {
                //edit ingredient
                break
              }
            }
          }
        }
      })

    };

    //Button must be able to select category as well
    return (
      <View style={globalStyles.container}>
        <Text style={globalStyles.h1}>Your Ingredients</Text>
        <View>
          { RenderButtons() }
        </View>
      </View>
    );
};

When I changed all the <Text> components in the form to <label>, I still got the error about text rendering, and I'm not sure where the invariant violation error comes from. Any help would be much appreciated!