react navigation reset stack not working. react-navigation v5 reset stack is not working

I have an auth screen, where i am doing my authentication work, but after on the successful of login, i want to reset the stack to Home Screen. But i am getting this error as Screen is not define.

App.js

    import React, {Component} from 'react'
import {SafeAreaView, Button, Text} from 'react-native'
import firebase from 'firebase'
import {firebaseConfig} from './fireabase.config'

// Navigation from react-navigation
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

// SCREENS
import AuthTabNavigator from './src/screens/authScreen/TabNavigator';
import DrawerNavigator from './src/screens/appScreen/DrawerNavigator';

// Redux Imports
import {Provider} from 'react-redux';
import store from './src/store';

import {AUTH, DRAWER, HOME} from './src/constants/navigation.constants';

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig)
}

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

import Login from './src/screens/authScreen/Login';
import Signup from './src/screens/authScreen/Signup';

const AuthNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name={'LOGIN'} component={Login} />
      <Tab.Screen name={'SIGNUP'} component={Signup} />
    </Tab.Navigator>
  )
}
class App extends Component {
  render () {
    return (
      <SafeAreaView style={{flex: 1}}>
        <Provider store={store}>
          <NavigationContainer>
            <Stack.Navigator>
              <Stack.Screen
                name={AUTH} 
                component={AuthNavigator} 
                options={{
                  headerShown:false
                }} 
              />
              <Stack.Screen 
                name={DRAWER}
                component={DrawerNavigator} 
                options={{
                  headerShown:false
                }} 
              />
            </Stack.Navigator>
          </NavigationContainer>
        </Provider>
      </SafeAreaView>
    )
  }
}

export default App

DrawerNavigator.js

import React, {Component} from 'react'
import { createStackNavigator } from '@react-navigation/stack';
import {createDrawerNavigator} from '@react-navigation/drawer';
import { Text, TouchableOpacity } from 'react-native';
const Drawer = createDrawerNavigator();

// Components

import Home from './Home';
import Profile from './Profile';
import Sounds from './Sounds';

// NAVIGATION CONSTANTS
import {HOME, PROFILE, SOUNDS} from '../../constants/navigation.constants';

const Stack = createStackNavigator();

const HomeScreen = ({ navigation }) => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} 
        options={{
          title: 'HOME',
          headerShown: true,
          headerLeft: () => <HanmurgerMenu navigation={navigation}/>
        }}
      />
    </Stack.Navigator>
  );
};

const ProfileScreen = ({navigation}) => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Profile" component={Profile} 
        options={{
          title: 'Profile',
          headerShown: true,
          headerLeft: () => <HanmurgerMenu navigation={navigation}/>
        }}
      />
    </Stack.Navigator>
  );
};

const SoundScreen = ({navigation}) => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Profile" component={Sounds} 
        options={{
          title: 'Sounds',
          headerShown: true,
          headerLeft: () => <HanmurgerMenu navigation={navigation}/>
        }}
      />
    </Stack.Navigator>
  );
};

function HanmurgerMenu({navigation}){
  return (
    <TouchableOpacity
      style={{ padding: 5 }}
      onPress={()=> navigation.openDrawer()}>
      <Text style={{ fontSize: 20 }}> ☰ </Text>
    </TouchableOpacity>
  )
}

function DrawerNavigator() {
  return (
    <Drawer.Navigator initialRouteName={HOME}>
      <Drawer.Screen name={'HOME'} component={HomeScreen} />
      <Drawer.Screen name={'PROFILE'} component={ProfileScreen} />
      <Drawer.Screen name={'SOUNDS'} component={SoundScreen} />
    </Drawer.Navigator>
  );
}

export default DrawerNavigator;

INSIDE Login.js after successful login i am doing this

navigation.navigate('DRAWER');

How can i remove the stack from LOGIN to DRAWER