как получить обновленный state из другого компонента в другой компонент в два одинкавые TextInput через onPress={handleClick}

            //Так значит нажимаю в TwoTextInput.js  на 1й TextInput перенаправляет на TextComponent.js оттуда введу в инпут любой текст и нажимаю на кнопку и перенаправляет обратно в TwoTextInput.js с state-ом и он вставляется в 1й TextInput. Но когда нажимаю на 2йTextInput перенаправляет TwoTextInput.js и также ввожу текст и нажимаю на кнопку но этот текст не вставляется в 2йTextInput. Пробовал еще создать компонент для 2го Textinput такой же TextComponent.js но код клонируется. 
//--------------------------------------------------------------------------------------------
import React from "react";
    import { Button, Image, StyleSheet, TextInput, View } from "react-native";
    
    import TextComponent from '../src/TextComponent';
    
    import RootNavigator from "./Root";
    function App() {
      return (
        <View style={styles.container}>
        
     <RootNavigator/>
          </View>
      );
    }
    
    
    const styles = StyleSheet.create({
      container: {
     width:'100%',
     height:'100%',
     backgroundColor:'grey',
      },
     
     
    });
    
    export default App;
    //-------------------------------------------------------------------------------------------

    import React from 'react';
     import {NavigationContainer} from "@react-navigation/native";
    import TwoTextinput from "./TwoTextinput";
    import {createStackNavigator} from "@react-navigation/stack";
    import TextComponent from './TextComponent';
    
    const Stack = createStackNavigator()
    
    
    const RootNavigator = (props) => {
      return (
          <NavigationContainer >
            <Stack.Navigator
            screenOptions={{
                headerShown: false,
            }}
            initialRouteName={"TwoTextinput"}
            >
                <Stack.Screen name={"TwoTextinput"} component={TwoTextinput} />
                  <Stack.Screen name={"TextComponent"} component={TextComponent} />
            </Stack.Navigator>
          </NavigationContainer>
          );
    };
    
    export default RootNavigator;
    //--------------------------------------------------------------------------------------------


    import React ,{useState, useRef, useEffect} from 'react';
    import {View, StyleSheet,TextInput, SafeAreaView} from 'react-native'
    import {useNavigation, useRoute} from "@react-navigation/native";
    
    const TwoTextInput = ()=>{
    
      const [fromText, setFromText] = useState('')
        const [destinationText, setDestinationText] = useState('')
    
        const ref1 = useRef(null)
        const ref2 = useRef(null)
    
        const route = useRoute();
        const navigation = useNavigation();
        const setOnMap = () => {
          console.log(ref1.current)
          ref1.current? navigation.navigate("TextComponent") : false
      
      }
      const checkLocation = ()=> {
        if(route.params?.post){
            setFromText(JSON.stringify(route.params?.post))
        }
        if(route.params?.destination){
            setDestinationText(JSON.stringify(route.params?.destination))
        }
    }
      useEffect(()=>{
        //console.log("render")
              checkLocation() 
         }, [fromText, destinationText, route.params?.post, route.params?.destination])
        
      return (
        <SafeAreaView>
        <View>
          
        <TextInput ref={ref1}
        value={fromText}
        onFocus={setOnMap}
         style={styles.textInput1} placeholder='from' />
          
          <TextInput 
          value={destinationText}
          onFocus={setOnMap}
          ref={ref2} style={styles.textInput1} placeholder='dastination'/>
    
          </View>
          </SafeAreaView>
      )
    }
    
    const styles = StyleSheet.create({
      textInput1:{
        width: '50%',
        backgroundColor:'#556789',
        borderRadius:5,
        height:'50%',
        FontFace:'Aria',
        fontWeight:'bold',
        fontSize:20,
        marginBottom:20,
       color:'black'
      },
      textInput2:{
        width: '50%',
        backgroundColor:'#556789',
        borderRadius:5,
        height:'10%',
        FontFace:'Aria',
        fontWeight:'bold',
        fontSize:20
      }
    })
    export default TwoTextInput;
//------------------------------------------------------------------------------------------

import React, { useEffect } from 'react';
import { Button, Image, StyleSheet, TextInput, View } from "react-native";
import { useNavigation } from '@react-navigation/native';

function TextComponent() {
  const navigation = useNavigation()
  const [text, setText] = React.useState('')
  const handleText = (text)=>{
    console.log(text)
setText(text)
  }

  
  const toDastination = () => {
  
    if (text && ref1 ) {
         navigation.navigate({
            name: "TwoTextinput",
            params: {post: text},
            merge: true
            }
            )
    }
}
  
  React.useEffect(()=>{

  },[])
  return (
    
    <View style={styles.container}>
      <TextInput onChangeText={(e)=>{handleText(e)}} style={styles.textInput1} placeholder='Enter name'/>
<Button title='Send' onPress={toDastination} style={styles.button1}/>
      </View>
  );
}



const styles = StyleSheet.create({
  container: {
 width:'100%',
 height:'100%',
 backgroundColor:'grey',
  },
  textInput1:{
    width: '50%',
    backgroundColor:'#556789',
    borderRadius:5,
    height:'10%',
    FontFace:'Aria',
    fontWeight:'bold',
    fontSize:20,
    marginBottom:20,
   color:'black'
  },
  button1: {
    width:'40%'
  }
})

export default TextComponent;