Navigation.navigate does not work - React Native

Question

I'm trying to change screens and I can't, it doesn't report any errors, the button just doesn't work, I click and it doesn't change screens.

SignIn.tsx

import { useNavigation } from "@react-navigation/native";

export function SignIn(){

    const navigation = useNavigation();

    function handleSignIn() {
        navigation.navigate('Home')
    }

    return(
        <View style={styles.container}>
            <ButtonIcon 
                title="Next" 
                activeOpacity={0.7}
                onPress={handleSignIn}
            />
        </View>
    )
}

Routes.tsx

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';

import { Home } from '../screens/Home';
import { SignIn } from '../screens/SignIn';

const { Navigator, Screen } = createStackNavigator();

export function AuthRoutes() {
  return(
    <Navigator screenOptions={{headerShown: false}}>
        <Screen name="SignIn" component={SignIn}/>
        <Screen name="Home" component={Home}/>
    </Navigator>
  )
}

As I said, there is no error in the code, at least according to the IDE there is no error, I can run the application, but when I click the button it has no effect, nothing happens. I've already modified a lot, added and removed, but I couldn't make it work, I don't know what I'm doing wrong.