How to navigate to another screen in react native?

I am new to react native. I am making a react native project. There is a welcome screen which appears when the app starts. There is a 'continue' button in the welcome screen. When I click the 'continue' button it should go to the login screen. But it is showing this error:

TypeError: undefined is not an object (evaluating 'navigation.navigate')

I tried to change the code to this.props.navigation.navigate('login') then also it shows error TypeError: undefined is not an object (evaluating '_this.props')

This is the code of welcome screen:

import React, { FunctionComponent, useState } from "react"
import { observer } from "mobx-react-lite"
import { Dimensions, Image } from "react-native"
import { Screen, Button } from "components"
import Carousel, { Pagination } from 'react-native-snap-carousel';
import { Block } from "components/block/block"
const { width: ScreenWidth } = Dimensions.get('screen');
import { NavigationProp, NavigationState } from "@react-navigation/native";

export interface AuthScreensWelcomeScreenProps {
   navigation?: NavigationProp<Record<string, object>, string, NavigationState, {}, {}>
}

export const AuthScreensWelcomeScreen: FunctionComponent<AuthScreensWelcomeScreenProps> = observer((props) => {

const {
    navigation
} = props;
const [activeSlide, setActiveSlide ] = useState(0);

const items = [
    { image: require('../../../assets/splash1.jpg') },
    { image: require('../../../assets/splash2.jpg') },
    { image: require('../../../assets/splash3.jpg') }
];

function renderItem ( { item, index } ) {
    return (
        <Image style={{ alignSelf: 'center', flex: 1, resizeMode: 'contain', width: ScreenWidth / 1.25 }} source={item.image}></Image>
    )
}

return (
    <Screen preset="fixed">
        <Block flex>
            <Carousel
                sliderWidth={ScreenWidth}
                itemWidth={ScreenWidth}
                data={ items }
                layout="default"
                renderItem={ renderItem }
                onSnapToItem={ index => { setActiveSlide( index ) } }/>
            <Block>
                <Pagination 
                    activeDotIndex={activeSlide}
                    dotsLength={items.length} 
                    dotStyle={{
                        width: 10,
                        height: 10
                    }}/>
            </Block>
        </Block>
        <Block row my={20} space="evenly" px={20}>
            <Button title="Continue" containerStyle={{ flex: 1 }} onPress={ ( ) => navigation.navigate('login') }/>
        </Block>
    </Screen>
)
})

This is the auth-navigator.tsx file:

import React, { FunctionComponent } from "react";
import { createNativeStackNavigator } from "react-native-screens/native-stack";
import { observer } from "mobx-react-lite";
import { AuthScreensLoginScreen } from "screens/auth-screens/login-screen";
import { AuthScreensRegisterScreen } from "screens/auth-screens/register-screen";
import { AuthScreensForgotPasswordScreen } from "screens/auth-screens/forgotpassword-screen";
import { AuthScreensWelcomeScreen } from 'screens/auth-screens/welcome-screen'; 

const { Navigator, Screen } = createNativeStackNavigator<{
    register: undefined,
    login: undefined,
    forgotpassword: undefined,
    welcome: undefined
}>();

export const AuthStack: FunctionComponent = observer( ( props ) => {

return (
    <Navigator
        initialRouteName="register"
        screenOptions={{
            headerShown: false,
            gestureEnabled: true,
            stackPresentation: "push",
            contentStyle: {
                backgroundColor: 'white'
            }
        }}>
        <Screen 
            name="register" 
            component={AuthScreensRegisterScreen} />
        <Screen 
            name="login" 
            component={AuthScreensLoginScreen} />
        <Screen 
            name="forgotpassword" 
            component={AuthScreensForgotPasswordScreen} />
        <Screen 
            name="welcome" 
            component={AuthScreensWelcomeScreen} />
    </Navigator>
);

} );