* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

@react-navigation/stack 에 계속 오류가 뜨네요....배운대로 연습삼아 하고 있는데...

작성한 코드 및 에러 메세지

<MainPage>

import React, { useEffect, useState } from 'react';

import {View, StyleSheet, Text, Image, TouchableOpacity} from 'react-native';

import hightheel from '../../../assets/hightheel.jpg'

import {AntDesign} from '@expo/vector-icons';

import LoadingPage from '../form/LoadingPage';

import styles from '../../styles/MainPageStyles';

import MyStack from '../stacknavigator/StackNavigator';

import LoginPage from '../form/LoginPage';

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

import {NavigationContainer} from '@react-navigation/native';

export default function MainPage() {

    const [ready, setReady] = useState(true)

    useEffect(()=>{

        setTimeout(()=>{

            setReady(false)

        }, 3000)

    })

   return ready ? <LoadingPage/> :  (

    <View style = {styles.container}>

        <View style = {styles.upperContainer}>

            <View style = {styles.uppercontainer01}>

                <Image source = {hightheel}/>

            </View>

            <View style = {styles.upperContainer02}>

                <Text style = {styles.headerText}>하루, 이틀 그리고 힐링</Text>

            </View>

        </View>

        <View style = {styles.secondaryUpperContainer}>

            <View style = {styles.secondaryUpperContainer01}>

                <TouchableOpacity onPress={()=>{navigation.navigate('LoginPage')}}>

                <AntDesign name ="login" size = {24} color="black"/>

                </TouchableOpacity>

            </View>

            <View style = {styles.secondaryUpperContainer02}>

            </View>

        </View>

        <View style = {styles.middleContainer}>

        </View>

        <View style = {styles.lowerContainer}>

        </View>

    </View>

  )

}

<StackNavigator.js>

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

import { createNativeStackNavigator } from '@react-navigation/native-stack';

import LoginPage from "../form/LoginPage";

const Stack = createStackNavigator();

const MyStack = () => {

    return(

        <Stack.Navigator>

            <Stack.Screen name = "LoginPage" component = {LoginPage}/>

        </Stack.Navigator>

    )

}

export default MyStack;