I need help importing drawer navigation into my App.js

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.