React Native: How to include multiple stackNavigators into a drawerNavigator in react native v5 (not v4)

Question

I'm new to react native and was trying to include two stackNavigators into a drawerNavigator in react native v5. My Navigator code is also given below.

When I add both stackNavigator into drawerNavigator, it shows error:

In v4 tutorial videos there are exapmles of adding stackNavigator into drawerNavigator but couldn't find any help for v5. Any help for v5?

ShopNavigator.js

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';

import Colors from '../constants/Color/Colors';

import ProductOverviewScreen from '../screens/shop/ProductOverviewScreen';
import ProductDetailsScreen from '../screens/shop/ProductDetailsScreen';
import CartScreen from '../screens/shop/CartScreen';
import OrdersScreen from '../screens/shop/OrdersScreen';

import CustomHeaderButton from '../components/UI/CustomHeaderButton';

const ProductsNavigator = createStackNavigator();
const OrdersNavigator = createStackNavigator();
const ShopDrawerNavigator = createDrawerNavigator();

function MyProductStack() {
    return (
        <ProductsNavigator.Navigator screenOptions={{
            headerStyle: {
                backgroundColor: Colors.Primary,
            },
            headerTitleStyle: {
                fontFamily: 'OpenSans-Bold',
            },
            headerBackTitleStyle: {
                fontFamily: 'OpenSans-Regular',
            },
            headerTintColor: 'white',
        }}>
            <ProductsNavigator.Screen
                name="ProductOverview"
                component={ProductOverviewScreen}
                options={({ navigation }) => ({
                    title: 'Product Overview',
                    headerRight: () => {
                        return (
                            < CustomHeaderButton
                                name='shopping-cart'
                                type='font-awesome'
                                onPress={() => navigation.navigate('Cart',)}
                            />
                        );
                    },
                })}
            />
            <ProductsNavigator.Screen
                name="ProductDetails"
                component={ProductDetailsScreen}
                options={({ navigation, route }) => ({
                    title: route.params.productTitle,
                    headerRight: () => {
                        return (
                            < CustomHeaderButton
                                name='shopping-cart'
                                type='font-awesome'
                                onPress={() => navigation.navigate('Cart',)}
                            />
                        );
                    },
                })}
            />
            <ProductsNavigator.Screen
                name="Cart"
                component={CartScreen}
                options={{ title: 'Cart' }}
            />
        </ProductsNavigator.Navigator >
    );
}

function MyOrdersStack() {
    return (
        <OrdersNavigator.Navigator screenOptions={{
            headerStyle: {
                backgroundColor: Colors.Primary,
            },
            headerTitleStyle: {
                fontFamily: 'OpenSans-Bold',
            },
            headerBackTitleStyle: {
                fontFamily: 'OpenSans-Regular',
            },
            headerTintColor: 'white',
        }}>
            <OrdersNavigator.Screen
                name="Orders"
                component={OrdersScreen}
                options={({ navigation }) => ({
                    title: 'Your Orders',
                    headerRight: () => {
                        return (
                            < CustomHeaderButton
                                name='shopping-cart'
                                type='font-awesome'
                                onPress={() => navigation.navigate('Cart',)}
                            />
                        );
                    },
                })}
            />
        </OrdersNavigator.Navigator>
    );
}

function ShopDrawer(){
    return (
        <ShopDrawerNavigator.Navigator>
            <ShopDrawerNavigator.Screen 
                name="Products"
                component={tried with both "MyProductStack"/"ProductsNavigator"}
            />
            <ShopDrawerNavigator
                name="Orders"
                component={tried with both "MyOrdersStack"/"OrdersNavigator"}
            />
        </ShopDrawerNavigator.Navigator>
    );
}

export default () => {
    return (
        <NavigationContainer>
            <ShopDrawer />
        </NavigationContainer>
    );
};

Answer 1

Here the problem is you have passed your navigator object as component instead of the actual component which is your stack. You have to use your stacks as component like below

function ShopDrawer(){
    return (
        <ShopDrawerNavigator.Navigator>
            <ShopDrawerNavigator.Screen 
                name="Products"
                component={MyProductStack}
            />
            <ShopDrawerNavigator.Screen
                name="Orders"
                component={MyOrdersStack}
            />
        </ShopDrawerNavigator.Navigator>
    );
}