Im facing an issue where i am trying to create an editable text input within my app. A brief summary of what is happening – Data is passed through from the screen to the modal. The modal then sets the state with the relevant values.

However, when trying to edit the text, the characters always reverts back to the previous, original value. Please find the relevant parts of the code below. Has per previous solutions i have included the onChangeText with the correct function which sets the new value, but no luck

Thanks in advance

const Step1 = ({title, setTitle, summary, setSummary, description, setDescription}) => {
    return (
        <ScrollView>
            <View style={styles.InputContainer}>
                <Text style={{ fontFamily: 'Gilroy-SemiBold', fontSize: 18, marginTop: 30 }}>Product Title</Text>
                <TextInput allowFontScaling={false}value={'title'} onChangeText={value => setTitle(value)} style={styles.singleInput} />
            </View>
            <View style={styles.InputContainer}>
                <Text style={{ fontFamily: 'Gilroy-SemiBold', fontSize: 18 }}>Product Summary</Text>
                <TextInput allowFontScaling={false} value={summary} multiline onChangeText={(value) => setSummary(value)} style={styles.multiLineInput} />
             </View>
             <View style={styles.InputContainer}>
                 <Text style={{ fontFamily: 'Gilroy-SemiBold', fontSize: 18 }}>Product Description</Text>
                 <TextInput allowFontScaling={false} value={description} multiline onChangeText={(value) => setDescription(value)} style={styles.multiLineInput} />
             </View>
        </ScrollView>
    )
}

    const [title, setTitle] = useState('') 
    const [summary, setSummary] = useState('')
    const [description, setDescription] = useState('')


    const populateData = async () => {
       await getProductById(productData).then((data) => {
        data.docs.forEach((prod) => {
            prodData = prod.data()
        })
       })
       setTitle(prodData.title)
       setSummary(prodData.summary)
       //console.log('function called')
    }

    useEffect(() => {
        checkPage()
        subscribe(productTags, () => {
            setTags(productTags);
        });
        subscribe(itemOptionsList, () => {
            setItemOptions(itemOptionsList.array)
        })
        populateData()
    },[page, validateStep1, tags, populateData])