I am trying to use the "@react-navigation/drawer": "^7.0.19" but it was not working properly

Question

// Navigation.js
import React, { useState } from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { useSelector } from 'react-redux';
import { LoginPage } from '../src/Screens/Auth/Login';
import { TeamBoard } from '../src/Screens/TeamBoard/index';
import { BoardDetails } from '../src/Screens/TeamBoard/BoardDetails';
import Sidebar from '../src/Screens/Components/Sidebar';
import { colors } from '../src/Config/colors';
import { IconButton, Menu, Provider } from 'react-native-paper';
import { Modal, Text, TouchableOpacity, View } from 'react-native';
import { BoardDetailsNav } from '../src/Screens/Components/BoardDetailsNav';
import { AddCard } from '../src/Screens/Components/AddCard';
import { ArchiveTask } from '../src/Screens/Components/ArchiveTask';
import { EditCard } from '../src/Screens/Components/EditCard';
import EvilIcons from 'react-native-vector-icons/EvilIcons';
import AntDesign from 'react-native-vector-icons/AntDesign';
import { PersonalBoard } from '../src/Screens/PersonalBoard';
import { PersonalBoardNav } from '../src/Screens/Components/PersonalBoardNav';
import { AddPersonalCard } from '../src/Screens/Components/AddPersonalCard';
import { EditPersonalCard } from '../src/Screens/Components/EditPersonalCard';
import { TaskCalendar } from '../src/Screens/Calendar';
const Root = createNativeStackNavigator();
const Auth = createNativeStackNavigator();
const Drawer = createDrawerNavigator();
const Stack = createNativeStackNavigator();
import { DrawerActions, useNavigation } from '@react-navigation/native';

export const AuthStack = () => {
  console.log("AuthStack Call");
  return (
    <Auth.Navigator
      headerMode="screen"
      initialRouteName="Login"
      screenOptions={{
        headerShown: false,
      }}>
      <Auth.Screen name="Login" component={LoginPage} />
    </Auth.Navigator>
  );
};
const BoardDetailsStack = () => {
  return (
    <Provider>
      <Stack.Navigator>
        <Stack.Screen
          name="BoardDetails"
          component={BoardDetails}
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="AddCard"
          component={AddCard}
          options={{
            headerStyle: {
              backgroundColor: colors.background_color,
            },
            headerTitleStyle: {
              fontFamily: 'Montserrat-Bold',
              color: colors.grey,
              fontSize: 16,
            },
            headerTintColor: colors.grey
          }}
        />
        <Stack.Screen
          name="EditCard"
          component={EditCard}
          options={{
            headerStyle: {
              backgroundColor: colors.background_color,
            },
            headerTitleStyle: {
              fontFamily: 'Montserrat-Bold',
              color: colors.grey,
              fontSize: 16,
            },
            headerTintColor: colors.grey
          }}
        />
        <Stack.Screen
          name="ArchiveTask"
          component={ArchiveTask}
          options={{
            headerStyle: {
              backgroundColor: colors.background_color,
            },
            headerTitleStyle: {
              fontFamily: 'Montserrat-Bold',
              color: colors.grey,
              fontSize: 16,
            },
            headerTintColor: colors.grey
          }}
        />
      </Stack.Navigator>
    </Provider>
  );
};

const PersonalBoardDetailsStack = () => {
  const navigation = useNavigation();
  return (
    <Provider>
      <Stack.Navigator>
        <Stack.Screen
          name="PersonalBoard"
          component={PersonalBoard}
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="addPersonalCard"
          component={AddPersonalCard}
          options={({ navigation }) => ({
            headerStyle: {
              backgroundColor: colors.background_color,
            },
            headerTitleStyle: {
              fontFamily: 'Montserrat-Bold',
              color: colors.grey,
              fontSize: 16,
            },
            headerTintColor: colors.grey,
          })}
        />
        <Stack.Screen
          name="editPersonalCard"
          component={EditPersonalCard}
          options={({ navigation }) => ({
            headerStyle: {
              backgroundColor: colors.background_color,
            },
            headerTitleStyle: {
              fontFamily: 'Montserrat-Bold',
              color: colors.grey,
              fontSize: 16,
            },
            headerTintColor: colors.grey,
          })}
        />
      </Stack.Navigator>
    </Provider>
  );
};

export const AppStack = () => {
  return (
    <Drawer.Navigator
      drawerContent={(props) => <Sidebar {...props} />}
      initialRouteName="Boards"
      screenOptions={{
        drawerStyle: {
          padding: 0,
        },
        headerStyle: {
          backgroundColor: colors.background_color,
        },
        headerTintColor: colors.grey,
        headerTitleStyle: {
          fontFamily: 'Montserrat-Bold',
        },
      }}
    >
      <Drawer.Screen
        name="Boards"
        component={TeamBoard}
        options={{ title: 'Boards' }}
      />

      <Drawer.Screen
        name="Calendar"
        component={TaskCalendar}
        options={{ title: 'Calendar' }}
      />

      <Drawer.Screen
        name="PersonalBoardDetailsStack"
        component={PersonalBoardDetailsStack}
        options={{ headerShown: false }}
      />

      <Drawer.Screen
        name="BoardDetailsStack"
        component={BoardDetailsStack}
        options={{ headerShown: false }}
      />
    </Drawer.Navigator>
  );
};



export const RootStack = () => {
  const token = useSelector(state => state?.authReducer?.token);
  console.log("token : ", token);
  return (
    <Root.Navigator screenOptions={{ headerShown: false }}>
      {token ? (
        <Root.Screen name="AppStack" component={AppStack} />
      ) : (
        <Root.Screen name="AuthStack" component={AuthStack} />
      )}
    </Root.Navigator>
  );
};

// Sidebar.js
const Sidebar = props => {
  const user = useSelector(state => state.authReducer.auth);

  const isRouteActive = routeName => {
    return props.state?.routeNames[props.state.index] === routeName;
  };


  const navigateToScreen = (routeName, params = {}) => {
    props.navigation.dispatch(
      CommonActions.navigate({
        name: routeName,
        params: params,
      })
    );
  };

  return (
    <View style={styles.container}>
      <View style={styles.userInfo}>
        <Text
          style={{
            backgroundColor: getColor(user.name[0]),
            color: colors.grey,
            width: 80,
            height: 80,
            marginBottom: 10,
            textAlign: 'center',
            lineHeight: 80,
            borderRadius: 50,
            fontSize: 20,
            fontFamily: 'Montserrat-Bold',
            borderWidth: 1,
            borderColor: colors.grey,
          }}>
          {getInitials(user.name)}
        </Text>
        <Text style={styles.name}>{user.name}</Text>
        <Text style={styles.email}>{user.email}</Text>
      </View>

      <DrawerContentScrollView
        {...props}
        contentContainerStyle={{flex: 1, paddingStart: 10}}>
        <DrawerItem
          label="Boards"
          icon={({size}) => (
            <Icon name="dashboard" color={colors.grey} size={size} />
          )}
          labelStyle={styles.drawerItemLabel}
          focused={isRouteActive('Boards')}
          onPress={() => navigateToScreen('Boards')}
        />
        <DrawerItem
          label="Personalboard"
          icon={({size}) => (
            <Icon name="space-dashboard" color={colors.grey} size={size} />
          )}
          labelStyle={styles.drawerItemLabel}
          focused={isRouteActive('PersonalBoardDetailsStack')}
          onPress={() => navigateToScreen('PersonalBoardDetailsStack', {
            screen: 'PersonalBoard',
          })}
        />
        <DrawerItem
          label="Calendar"
          labelStyle={styles.drawerItemLabel}
          icon={({size}) => (
            <Entypo name="calendar" color={colors.grey} size={size} />
          )}
          focused={isRouteActive('Calendar')}
          onPress={() => navigateToScreen('Calendar')}
        />
      </DrawerContentScrollView>
    </View>
  );
};

I have created a navigation drawer for my app using react - navigation but when I tried to customize my drawer I faced issue related to navigation. I have created a custom drawer component in order to create a fully customized drawer.But as soon as I tried to provide navigation functionality like "props.navigation" or my "navigateToScreen()" method, it doesn't move to another screen and also no errors were generated which gave me difficulty to debug the code. Here is my code for more details. I have done a lot of search for this problem but didn't got the proper answer.how can i resolve this issue