Estou tendo erro com a ultima versão de react nativa para Navigation, ja tentei de varias formas e não funciona


indesx.js

import React, { useState, useEffect, Component } from ‘react’;
import firebase from ‘react-native-firebase’;
import AsyncStorage from ‘@react-native-community/async-storage’;
import { NavigationContainer } from ‘@react-navigation/native’;
import { createStackNavigator } from ‘@react-navigation/stack’;
import { useNavigation } from ‘@react-navigation/native’;

import {
Text,
KeyboardAvoidingView,
Image,
View,
TextInput,
TouchableOpacity,
StyleSheet,
Animated,
Keyboard,
NativeEventEmitter,
Alert,
Button
} from ‘react-native’;

export default function Main() {

const navigation = useNavigation();

return(
    <Button
      title="Ir para Home"
      onPress={() => {
        navigation.navigate('Home');
      }}
    />
);

}

routes.js

import React from ‘react’;
import { createAppContainer, createSwitchNavigator, NavigationContainer } from ‘@react-navigation/native’;
import { createStackNavigator, HeaderTitle } from ‘@react-navigation/stack’;

import Main from ‘../pages/Main’;
import Home from ‘../pages/Home’;

const Stack = createStackNavigator();

//const Routes = createAppContainer(createSwitchNavigator({
// Main,
// })
//);

export default function Routes(){
return (

<Stack.Navigator initialRouteName={Main}>
<Stack.Screen name=”Main” component={Main}/>
<Stack.Screen name=”Home” component={Home}/>
</Stack.Navigator>

);
}

Home.js

import React from ‘react’;
import { View, Text, Button} from ‘react-native’;
import ‘react-native-gesture-handler’;

export default function Home({ navigation }){
return (

Entrou aqui jhow
<button
title=”Login”
onPress={ () => navigation.navigation(‘Main’)}>

);
}

indesx.js Principal

import ‘react-native-gesture-handler’;
import {AppRegistry} from ‘react-native’;
import {name as appName} from ‘./app.json’;

import Routes from ‘./src/services/routes’;

AppRegistry.registerComponent(appName, () => Routes);

inserir a descrição da imagem aqui