I need help importing drawer navigation into my App.js - react-native

Question

All of my code is in my App.js file but drawer navigation doesn't seem to be working when I integrate it. The drawer navigation is in a different file and I imported it into my App.js. This is my code for the file:
import React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import { StyleSheet, Text, View, Button, Image, TextInput, TouchableOpacity, FlatList, SafeAreaView, Dimensions, } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { Ionicons } from '#expo/vector-icons';
import {Octicons} from '#expo/vector-icons';
import {AntDesign} from '#expo/vector-icons';
import {MaterialIcons, MaterialCommunityIcons } from '#expo/vector-icons';
import { useState } from "react";
import ReactDOM from "react-dom/client";
import analytics from '#react-native-firebase/analytics';
import 'react-native-gesture-handler';
import {
createDrawerNavigator,
DrawerContentScrollView,
DrawerItemList,
DrawerItem,
} from '#react-navigation/drawer';
const Drawer = createDrawerNavigator();
const MyStack = () => {
return (
<NavigationContainer>
<Drawer.Navigator useLegacyImplementation initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Login" component={LoginScreen} />
</Drawer.Navigator>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{
title: '',
headerLeft: () => (
<View style={{flexDirection:'row'}} >
<TouchableOpacity style={{left: 50, top: 45}}>
<Ionicons name="reorder-three" color="black" size={40} />
</TouchableOpacity>
<Image
style={{width: 50, height: 50 , left: 100, top: 40}}
source={require('./assets/videocamera.png')}
/>
<Image
style={{width: 140, height: 140, left: 90}}
source={require('./assets/vihubprofile.png')}
/>
</View>
),
headerRight: () => (
<View style={{flexDirection:'row'}} >
<TouchableOpacity style={styles.input}>
<TextInput style={styles.textinput} placeholder=" Search "></TextInput>
</TouchableOpacity>
<TouchableOpacity style={{right: 350, top: 5 }}>
<Ionicons name="ios-search" color="grey" size={30} />
</TouchableOpacity>
<TouchableOpacity style={{right: 50 }}>
<Ionicons name="settings" color="black" size={40} />
</TouchableOpacity>
<TouchableOpacity style={styles.signinheader} onPress={() => navigation.navigate('login')}>
<Text style={styles.signincolor}>SIGN IN</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.signup} onPress={() => navigation.navigate('signup')}>
<Text style={styles.signupcolor}>SIGN UP</Text>
</TouchableOpacity>
</View>
),
}}
/>
<Stack.Screen name="login" component={LoginScreen} options={{ headerShown: false }} />
<Stack.Screen name="signup" component={SignupScreen} options={{ headerShown: false }} />
</Stack.Navigator>
</NavigationContainer>
);
}
The problem is in my navigation container because I think my stack navigator is already in there so there is an error.