Text input for React Native

Web Development
1

I went through the Woofstagram module and everything seems good. No syntax errors or anything. However, I have a weird issue when I try and input text in all of the fields. It only allows me to input one character before the cursor defaults out of the input field. See code below.

import React, { useState } from "react";
import { View, ScrollView, Text, TextInput } from "react-native";

function App() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirmationPassword, setConfirmationPassword] = useState("");
  const [name, setName] = useState("");
  const [birthday, setBirthday] = useState("");
  const [breed, setBreed] = useState("");
  const [toy, setToy] = useState("");

  function confirmPasswordsMatch(props) {
    const {
      nativeEvent: { text },
    } = props;
    if (text !== password) {
      alert("Passwords do not match, please try again.");
    }
  }
  return (
    <ScrollView
      style={{ flex: 1, justifyContent: "center", backgroundColor: "#ecf0f1" }}
    >
      <InputWithLabel
        label="Email"
        placeholder="Type your email here"
        value={email}
        onChangeText={setEmail}
      />
      <InputWithLabel
        label="Password"
        placeholder="Type your password here"
        value={password}
        onChangeText={setPassword}
        secureTextEntry={true}
      />
      <InputWithLabel
        label="Confirm Password"
        placeholder="Re-Type your password here"
        value={confirmationPassword}
        onChangeText={setConfirmationPassword}
        secureTextEntry={true}
        onSubmitEditing={confirmPasswordsMatch}
      />
      <InputWithLabel
        label="Name"
        placeholder="Type your pets name here"
        value={name}
        onChangeText={setName}
      />
      <InputWithLabel
        label="Date of birth"
        placeholder="Type your pets birthday here"
        value={birthday}
        onChangeText={setBirthday}
      />
      <InputWithLabel
        label="Breed"
        placeholder="Type your pets breed here"
        value={breed}
        onChangeText={setBreed}
      />
      <InputWithLabel
        label="Toy"
        placeholder="Type your pets favorite toy here"
        value={toy}
        onChangeText={setToy}
      />
    </ScrollView>
  );

  function InputWithLabel(props) {
    const {
      label,
      placeholder,
      value,
      onChangeText,
      secureTextEntry,
      onSubmitEditing,
    } = props;
    return (
      <View style={{ padding: 16 }}>
        <Text style={{ padding: 8, fontSize: 18 }}>{label}</Text>
        <TextInput
          placeholder={placeholder}
          value={value}
          onChangeText={onChangeText}
          secureTextEntry={secureTextEntry}
          onSubmitEditing={onSubmitEditing}
          style={{ padding: 8, fontSize: 18 }}
        />
      </View>
    );
  }
}
export default App;