How to pass flat list item data to another screen's textinput

See more:

PHP

react-native

I am able to pass screen1 flatlist data (props) to screen2, but what i want is the data to be inside screen2 TextInput.

Screen1

export default class Data extends Component {
    constructor(){
        super()
        this.state={
            isLoading: true,
            dataSource: []
        }
    }
    componentDidMount() {
        const url = "example.php";

            fetch(url,{
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify('')
            })
            .then((response)=>response.json())
            .then((responseJson)=> {
                this.setState({
                isLoading: false,
                dataSource : responseJson
                })
            })    
   }

   _renderItem = ({item, index}) => (
        // <TouchableOpacity onPress={() => alert(item.name + '\n' + item.course) }>
        <TouchableOpacity onPress={() =>{this.props.navigation.navigate('finalsDet', {item})} }>
            <View style={styles.itemList}>
                <Text>{item.SN}</Text>
            </View>
        </TouchableOpacity>
    );

    render() {
        if(this.state.isLoading){
            return(
                <View style={styles.cont}>
                    <ActivityIndicator size="large" animating/>
                </View>
            )
        }else{
        return (

            <View style={styles.cont}>
                <FlatList
                    data={this.state.dataSource}
                    renderItem={this._renderItem}
                    keyExtractor={(item) => item.SN.toString()}
                /> 
            </View>

            );
        }
    }
}

Screen2

const FinalsDetails = ({navigation,route}) => {
    const { item } = route.params;

    function navigateBack(){
        navigation.navigate('finalsMain');
    }

    return (


        <View style={styles.mainView}>
            <View style={styles.TopView}>
                <Image style={styles.ImgStyle}
                 source={require('../assets/lion.png')} 
                 />
            </View>
            

            <ScrollView style={styles.BottomView}
            >
                <Text style={styles.header}>
                    Edit{'\n'}Here!
                </Text>

            <View style={styles.form}> 

            <Text style={styles.artist_name}>{item.name}</Text>
            <Text style={styles.artist_name}>{item.email}</Text>
      );
   }

Any help would be much appreciated :)

What I have tried:

i tried using state to Onchange the textinput in screen2 but its not working and i keep getting an undefined object error, or maybe i just put everything wrong. Im lost since im still learning flatlist and passing params. Any suggestion will be much appreciated.