Open a new screen through a tab screen - react-native

Question

I'm trying to show a single screen when someone clicks on a text.
I created a login screen, a single screen called Test, and the main screen with a navigation container that contains two screens inside. And I would like to put inside one of the screens, a clickable text that opens a new screen when clicked.
I'm passing the navigator as a parameter too, but when I try to run my app and I click at the clickable text, I receive this message:
The action 'NAVIGATE' with payload {"name":"Test"} was not handled by
any navigator.
Do you have a screen named 'Test'?
If you're trying to navigate to a screen in a nested navigator, see
https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.
This is a development-only warning and won't be shown in production.
My routes file:
export default class App extends React.Component {
render() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName='Login' screenOptions={{headerShown: false}}>
<Stack.Screen name='Main' component={Main} />
<Stack.Screen name='Login' component={Login} />
<Stack.Screen name='Test' component={Test} />
</Stack.Navigator>
</NavigationContainer>
);
}
}
Tab Navigator file
const Tab = createBottomTabNavigator();
export default function App ({navigation}){
return (
<NavigationContainer independent={true} >
<Tab.Navigator>
<Tab.Screen
name="Profile"
component={ProfileScreen}
options={{
tabBarLabel: 'Perfil',
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home-outline" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="List"
component={ListScreen}
initialParams={{ navigation: navigation }}
options={{
tabBarLabel: 'List'
}}
/>
</Tab.Navigator>
</NavigationContainer>
);
}
ListScreen function (contains the screen that shows a clickable text)
function ListScreen(param) {
return (
<SafeAreaView style={{ flex: 1, backgroundColor: "#fff" }}>
<LinearGradient
colors={['#000f17', '#0c3552']}
style={styles.main_container}>
<SafeAreaView style={styles.main_subcontainer}>
<List navigate={param}/>
</SafeAreaView>
</LinearGradient>
</SafeAreaView>
);
}
List component
export class List extends Component {
constructor(props) {
super(props);
console.log(this.props.navigate.navigation.navigate);
}
render() {
return (
<View>
<ScrollView>
<TouchableOpacity onPress={() => {
this.props.navigate.navigation.navigate('Test')
}}>
<Text>Click Here</Text>
</TouchableOpacity>
</ScrollView>
</View>
);
}
}