React Native pass parameters from Screen to Tab Navigator - react-native

Question

I am trying to pass a parameter from a screen to the Tab Navigator. In this I want to use it. Following the corresponding lines from my App.tsx:
const Tab = createBottomTabNavigator();
const AppStack = () => {
const [chatcount, setChatcount] = React.useState(0);
...
chatbadge = (number) => {
setChatcount(number)
};
...
return(
<Tab.Navigator
initialRouteName="..."
tabBarOptions={{
activeTintColor: 'rgba(255,0,35, 1)',
inactiveTintColor: 'rgba(255,0,35, 0.7)',
inactiveBackgroundColor: 'rgb(255, 235, 238)',
activeBackgroundColor: 'rgb(255, 235, 238)',
style: {backgroundColor: 'rgb(255, 235, 238)'},
}}
>
...
<Tab.Screen name="Chats" component={() => <Chats chatbadge={this.chatbadge}/>}/>
...
</Tab.Navigator>
)
};
const App = () => {
return(
<ActionSheetProvider>
<AuthContext.Provider value={authContext} >
<NavigationContainer>
<AppStack/>
</NavigationContainer>
</AuthContext.Provider>
</ActionSheetProvider>
);
}
export default App;
Now I want to set the chatcount in my chats screen /Chats.tsx:
import * as React from "react";
import { Image, StyleSheet, View, Text, FlatList, TouchableOpacity, AsyncStorage, Platform, TextInput, SafeAreaView } from "react-native";
...
import { createStackNavigator } from '#react-navigation/stack';
import { NavigationContainer } from '#react-navigation/native';
...
import Chat from "../screens/Chat";
...
const Stack = createStackNavigator();
function NavStack() {
return (
<Stack.Navigator screenOptions={{ headerShown: false}}>
<Stack.Screen name="Chats" component={Chats}/>
<Stack.Screen name="Chat" component={Chat}/>
...
</Stack.Navigator>
);
}
class Chats extends React.Component<{}, State> {
constructor(props) {
super(props);
this._isMounted = false;
}
state = {
data: [],
value: ""
}
componentDidMount() {
this._isMounted = true;
this._isMounted && this.fetchData()
this._isMounted && setInterval(() => this.fetchData(), 1000);
}
componentWillUnmount(){
this._isMounted = false;
}
fetchData = async () => {
if(this._isMounted){
const response = await fetch('...', {
....
});
const json = await response.json();
this.setState({data: json});
this.props.chatbadge(json)
}
}
...
render(){
...
const {navigation} = this.props
return(
<SafeAreaView style={styles.container}>
...
</SafeAreaView>
)
}
}
const styles = StyleSheet.create({
...
});
this.props.chatbadge(json) shows an error that this.props.chatbadge is not defined. console.log(this.props.chatbadge) displayes "undefined".
I would be very happy about help.
Best regards
Lukas