Can't type more than one character in textInput within sectionList

Question

I have been trying to figure this out for a couple of days, and I just can't find a solution. I have dynamic textInputs within a sectionList. When I try typing in the textInput, it only lets me type one character at a time (I can type one character then it stops, and then I need to re-tap the input space to type again). From what I can tell this is happening because it keeps reloading every time I type. Does anyone know how to fix this and get this to work? I would really appreciate any help or advice. Thank you!

import React,{ useEffect, useState } from "react";
import { View, Modal, StyleSheet, Pressable,TouchableOpacity, Text, FlatList, SectionList, TextInput, Alert, Dimensions } from 'react-native';
import * as Contacts from 'expo-contacts';
import { useMutation, useQuery, useLazyQuery, gql, useApolloClient} from '@apollo/client';
import { MaterialCommunityIcons, FontAwesome  } from '@expo/vector-icons'; 
import { RootStackParamList, MessageNavProps } from '../navigation/types';
import { StackNavigationProp } from '@react-navigation/stack';


const SCREEN_HEIGHT =  Dimensions.get('window').height; 

export const useContacts = /*async*/(users:any, added:any) => {
    const [addedEmails, setAddedEmails]:any = useState({
      0: '',
      1: '',
      2: '',
      3: '',
      4: '',
    })

    const [addedPhoneNumbers, setAddedPhoneNumbers]:any = useState({
      0: '',
      1: '',
      2: '',
      3: '',
      4: '',
    })
    

    let emails:String[] = [];
    let phoneNumbers:Number[] = [];
    //let safetyContacts:String[] = [];
    const sectionData = [
      {
        title: 'Add PhoneNumbers',
        data: [{type:'phone', value:addedPhoneNumbers[0], key:1}, {type:'phone', value: addedPhoneNumbers[1], key:2},{type:'phone', value: addedPhoneNumbers[2], key:3},{type:'phone', value: addedPhoneNumbers[3], key:4}, {type:'phone', value: addedPhoneNumbers[4], key:5}],
      },
      {
        title: 'Add Emails',
        data: [{type:'emails', value:addedEmails[0], key:6}, {type:'emails', value:addedEmails[1], key:7},{type:'emails', value:addedEmails[2], key:8},{type:'emails', value: addedEmails[3], key:9}, {type:'emails', value: addedEmails[4], key:10}],
      },
    ]

      const onSaveHandler2 = () => {
        added({variables:{input:{added: {emails:emailsAdded, phoneNumbers:phoneNumbersAdded, userIds:blockedAdded?.added?.userids}}}})
      }


  
const addContacts = (add: boolean, setAdd: (newType: boolean) => void) => { 
  
  const RenderComponent = (prop) => {
    console.log('item', prop.item)
     const {item, index} = prop.item;
     console.log('item????', item)
    return (
     <TextInput
       placeholder={item.type === 'emails' ? /*(prop.item.value.length > 0 ? prop.item.value :*/"add emails"/*)*/:"add phoneNumbers"}
       placeholderTextColor ={'hsl(0, 0%, 80%)'}
       onChangeText={(text) => {
         ////(e) => onChange(e.nativeEvent.text, item.index, item.item.type)}
        (item.type === 'emails') ? (
        setAddedEmails({
        ...addedEmails,
        [index]:text,
        })
        )
      :
      (
        setAddedPhoneNumbers({
          ...addedPhoneNumbers,
          [index]:text,
        })
      )
      }}
      value={item.value/*(prop.item.item.type === 'emails') ? 
        addedEmails[prop.item.index]
      :
        addedPhoneNumbers[prop.item.index]*/
      }
      
       //value={item.type === 'emails' ? value : val}
      />
    )
  }
  
  return (
    <View>
    <SectionList
    contentContainerStyle={{height:200,marginBottom:10}}
    keyExtractor={(item, index) => item.type + index}
    extraData={sectionData}
    keyboardType ={(item:any) => item.title === 'Add Emails' ? 'email-address':'number-pad'}
    sections={sectionData}
    renderSectionHeader={({section: {title}}) => (
      <Text>{title}</Text>
    )}
    renderItem={(item, index) => <RenderComponent item={item} index={index}/>}
     />
    <Pressable 
      onPress={onSaveHandler2}
      onPressOut={()=>setAdd(false)}
      style={{ 
        backgroundColor: '#e33062',
        height: 50,
        width:200,
        borderRadius: 5,
        alignItems: 'center',
        flexDirection: 'row',
        justifyContent: 'center',
      }}
    >
    {/*{loading && <ActivityIndicator />}*/}
      <Text 
        style={{
          color: 'white',
          fontSize: 18,
          fontWeight: 'bold'
        }}>
          Save
      </Text>
    </Pressable>
    </View>
  )
}

  return {
    addContacts,
  }
}