Cara Membuat Multiple Pages dengan React Native

Hallo Teman-teman, saya sedang mengerjakan Program Multiple Pages dengan React Native, rencananya saya membuat 3 pages, tetapi baru berhasil 2 pages, saya masukkan page 3 langsung error,

Ada yang bisa bantu? Terima kasih.

App.js:

// App.js
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Page2 from './src/components/page2'

const Stack = createStackNavigator();

function PageSatu({ navigation }) {
  return (
    <View style={styles.container}>
      <Text style={{color: "#FFFFFF"}}>Page 1</Text>
      <Button
        title="OK"
        onPress={() => navigation.navigate('Page2')}
      />
    </View>
  );
};

function PageDua() {
  return (
    <Page2/>
  );
}

function PageTiga() {
  return (
    <Page3/>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Page1">
        <Stack.Screen name="Page1" component={PageSatu} />
        <Stack.Screen name="Page2" component={PageDua} />
        <Stack.Screen name="Page3" component={PageTiga} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#343434',
    alignItems: 'center',
    justifyContent: 'center',
  }
});

Page 2:

// page2.js
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

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

const Page2 = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text style={{color: "#FFFFFF"}}>Page 2</Text>
      <Button
        title="OK"
        onPress={() => navigation.navigate('Page3')}
      />
    </View>
  );
};

export default Page2;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#343434',
    alignItems: 'center',
    justifyContent: 'center',
  }
});

Page3:

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

const Page3 = () => {
  return (
    <View style={styles.container}>
      <Text style={{color: "#FFFFFF"}}>Page 2</Text>
      <Button
        title="OK"
        onPress={() => navigation.navigate('Page3')}
      />
    </View>
  );
};

export default Page3;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#343434',
    alignItems: 'center',
    justifyContent: 'center',
  }
});