"TypeError: (0, _reactNavigationStack.default) is not a function" when using Stack Navigator

I made the home screen for my app using React-Native and went back to implement Stack Navigator so that I could start on my next screen.

It's displaying this error message:

I've narrowed it down to something wrong with my home screen that I made, can anyone help me figure out where I'm going wrong?

App screen

import React from 'react';
import { View, Text, Button } from 'react-native';
import  createAppContainer  from 'react-navigation';
import createStackNavigator from 'react-navigation-stack';

//Component Screens
import Home from './Home/Home.js';

const AppNavigator = createStackNavigator(
    {
    Home: { screen: Home }
},

);

const App = createAppContainer(AppNavigator);

export default App;

Home screen

import React, {Component} from 'react';
import { StyleSheet, Text, View, ImageBackground, 
    Image, TextInput, Dimensions, Platform } from 'react-native';
  import  BackgroundCarousel from './components/Login_Screen/BackgroundCarousel.js'
  import Button_login from './components/Login_Screen/button_login.js'
  import  Button  from './components/Login_Screen/button.js'

  const images = [
    require("./images/Login_Images/basketball.jpg"),
    require("./images/Login_Images/network.jpg"),
    require("./images/Login_Images/memories.jpg"),
    require("./images/Login_Images/photographer.jpg")
  ];


  /* Logo for login page */
  import logo from './Icon/iconpersons.png'


  const { width: WIDTH } = Dimensions.get('window')


  const Home = ({navigation}) => { 


    return (
      <View style= {styles.carouselContainer}>
        <BackgroundCarousel images={images}>

          <View style={styles.logoContainer}>
            <Image source={logo} style={styles.logo}/>
            <Text style={styles.logoText}>Hello World</Text>
          </View>

            <Button style= {styles.button}>
              Let's Get Started
            </Button>

          <Button_login></Button_login>

          </BackgroundCarousel>
          </View>

    );

  }




  const styles = StyleSheet.create({
    carouselContainer: {
      height: "100%",
      width: "100%",
      backgroundColor: '#fff',
      flex: 1

  },
    logoContainer:{
      zIndex: 2,
      alignItems: 'center',
      position: 'absolute',
      justifyContent: "center",
      top: 0, left: 0, right: 0, bottom: 450

    },
    logo: {
      zIndex: 2,
      width: 125,
      height:125,

    },
    logoText: {
      zIndex: 2,
      color: 'white',
      fontSize: 25,
      fontWeight: '500',
      borderColor: 'white',
     //fontFamily: "ProximaNova-Regular", 


    },
    button: {
      flex: 1,
      zIndex: 2,
    }
  });



  export default Home

EDIT: I'm trying to make my home page the first one that shows up when I load my app. It was working before I implemented stack navigation, and now im just getting bugs. I'm curious, is

const Home = ({navigation}) => { 

used correctly on my home screen?