Making a drawer navigator for app with multiply files

I have the following error:"Another navigator is already registered for this container.You likely have multiple navigators under a single "NavigationContainer" or "Screen" ".

But as my app is a little specific, i couldn't find anything that really helped, i'm using typescript and i could only find examples on youtube by people using javascript. This is my code:

Main App.tsx:

const Stack = createStackNavigator();

const Drawer = createDrawerNavigator();

export default function App() {

return (

<NavigationContainer><Stack.Navigator   initialRouteName="Login"  screenOptions={{headerShown: false}}><Stack.Screen      name="Home"      component={Home}    /><Stack.Screen      name="Login"      component={Login}    /></Stack.Navigator><Drawer.Navigator   initialRouteName="Home"><Drawer.Screen       name="Home"       component={Home}     /><Drawer.Screen       name="Profile"       component={ProfileScreen}    /></Drawer.Navigator></NavigationContainer>

);

}

Home.tsx (this is where my drawer should be)

export default function Home({ navigation }) {

return(<KeyboardAvoidingView>            <View style={styles.container}><Header                placement="left"                centerComponent={{ text: 'i B l o c k',                 style: { color: '#fff', fontWeight: 'bold', fontSize: 20 } }}                rightComponent={{                     icon: 'menu',                     color: '#fff',                    onPress: ()=> navigation.openDrawer()                }}                containerStyle={{                    marginTop: -25,                    backgroundColor: '#87C8E1',                    justifyContent: 'space-around',                  }}            /><Image                style={styles.quadra}                source = {require('../../assets/quadra.png')}            /></View></KeyboardAvoidingView>)

}

and finally my ProfileScreen.tsx

export default function ProfileScreen({ navigation }) {

return (<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}><Button onPress={() => navigation.goBack()} title="Go back home" /></View>);

}

I'm new to React-Native, so i really don't realize what i'm doing wrong.