React-native: Hooks can only be called inside of the body of a function component

Hey i have a problem with my react-native app.

I have 3 file

App.tsx

 /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */import React from 'react';import {  SafeAreaView,  ScrollView,  StatusBar,  StyleSheet,  Text,  useColorScheme,  View,  Button} from 'react-native';import {  Colors,  DebugInstructions,  Header,  LearnMoreLinks,  ReloadInstructions,} from 'react-native/Libraries/NewAppScreen';import { NavigationContainer, useNavigation } from '@react-navigation/native';import { createNativeStackNavigator } from '@react-navigation/native-stack';import Helloworld from './components/Helloworld';import Test from './components/Test';const Stack = createNativeStackNavigator();class App extends React.Component {  render() {    const isDarkMode = useColorScheme() === 'dark';    const backgroundStyle = {      backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,    };    return (    <NavigationContainer>      <Stack.Navigator><Stack.Screen name="Home" component={Helloworld} /><Stack.Screen name="Test" component={Test} /></Stack.Navigator></NavigationContainer>  );}};export default App;

components/Test.tsx

import React from 'react';import {  SafeAreaView,  ScrollView,  StatusBar,  StyleSheet,  Text,  useColorScheme,  View,  Button} from 'react-native';import {  Colors,  DebugInstructions,  Header,  LearnMoreLinks,  ReloadInstructions,} from 'react-native/Libraries/NewAppScreen';import { NavigationContainer } from '@react-navigation/native';import { createNativeStackNavigator } from '@react-navigation/native-stack';import { StackScreenProps } from '@react-navigation/stack';// eslint-disable-next-line  @typescript-eslint/no-explicit-anyconst Test = ({ navigation }:any) => {    return (<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}><Text>BAGOU IS BEST</Text><Button            title="Go to Home... again"            onPress={() => navigation.push('Home')}          /></View>      );}export default Test;

components/Helloworld.tsx

import React from 'react';import {  SafeAreaView,  ScrollView,  StatusBar,  StyleSheet,  Text,  useColorScheme,  View,  Button} from 'react-native';import {  Colors,  DebugInstructions,  Header,  LearnMoreLinks,  ReloadInstructions,} from 'react-native/Libraries/NewAppScreen';import { NavigationContainer } from '@react-navigation/native';import { createNativeStackNavigator } from '@react-navigation/native-stack';import { StackScreenProps } from '@react-navigation/stack';const Helloworld = ({ navigation }:any) => {        return (<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}><Text>BAGOU IS BEST</Text><Button            title="Go to Home... again"            onPress={() => navigation.navigate.push('Home')}          /></View>      );    }export default Helloworld;

and i have this error when i run "yarn android"

BUNDLE  ./index.jsLOG  Running "appfirst" with {"rootTag":1}ERROR  Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:1. You might have mismatching versions of React and the renderer (such as React DOM)2. You might be breaking the Rules of Hooks3. You might have more than one copy of React in the same appSee https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.This error is located at:    in App (at renderApplication.js:50)    in RCTView (at View.js:32)    in View (at AppContainer.js:92)    in RCTView (at View.js:32)    in View (at AppContainer.js:119)    in AppContainer (at renderApplication.js:43)    in appfirst(RootComponent) (at renderApplication.js:60) ERROR  Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:1. You might have mismatching versions of React and the renderer (such as React DOM)2. You might be breaking the Rules of Hooks3. You might have more than one copy of React in the same appSee https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.This error is located at:    in App (at renderApplication.js:50)    in RCTView (at View.js:32)    in View (at AppContainer.js:92)    in RCTView (at View.js:32)    in View (at AppContainer.js:119)    in AppContainer (at renderApplication.js:43)    in appfirst(RootComponent) (at renderApplication.js:60)

I don't understand why.

Can you explain me why?

Also what can i set instead of "{ navigation }:any" because i know is not any but i don t know the type of navigation