I start using rn this week to make a medium scale app for some tutoring school. And found some problem with navigating with defined props.

As u will see i define the stack screen name with 'test1', 'test2' in root app.js same with address variable.

the problem is when i use 'test1' instead of {address} it is working fine, but when i use {address}, it's yelling at me, even when i console it's still 'test1'.

Here's my code :

....
....

    <Stack.Screen name="test1" component={GrLesson1} />
    <Stack.Screen name="test2" component={GrLesson2} />

    function GrHome({navigation}) {
        return (
    <View>
    
    <GrHomeProps title="test1" address="test1" navigation={navigation}/>
    <GrHomeProps title="test2" address="test2" navigation={navigation}/>
    
    </View>
        )
    }

function GrHomeProps({title,navigation,address}) {
    return (
<View>
<TouchableOpacity
onPress={()=>{
navigation.navigate({address})

}}
>

   <Text> {title} </Text>
</TouchableOpacity>
</View>
    )
}

Can somebody help me? find the mistake i made or teach me another way to do this with reusable component?