Unable to nest stack navigator within a drawer navigator

I created a stack navigator which show be nested inside of a drawer navigation.My stack navigator code:

import * as React from "react";import { createStackNavigator } from "@react-navigation/stack";import HomeTabScreen from "../tabs";const Stack = createStackNavigator();const StackScreen = () => {<Stack.Navigator><Stack.Screen name="MainViewScreen" component={HomeTabScreen} /></Stack.Navigator>;};export default StackScreen;

and my drawer component which will be the root is as follows

import React from "react";import { createDrawerNavigator } from "@react-navigation/drawer";import SettingScreen from "../../screens/settings";import StackScreen from "../stack/index";const Drawer = createDrawerNavigator();const AppDrawerNavigation = () => {  return (<Drawer.Navigator><Drawer.Screen        name="Home"        component={StackScreen}        options={{          title: "home",        }}      /><Drawer.Screen name="Settings" component={SettingScreen} /></Drawer.Navigator>  );};export default AppDrawerNavigation;

But I get this message typescript and won't compile

Type '() => void' is not assignable to type 'ComponentClass<any, any> | FunctionComponent<any> | undefined'.  Type '() => void' is not assignable to type 'FunctionComponent<any>'.    Type 'void' is not assignable to type 'ReactElement<any, any> | null'.ts(2322)types.d.ts(290, 5): The expected type comes from property 'component' which is declared here on type '(IntrinsicAttributes & { name: "Home"; options?: DrawerNavigationOptions | ((props: { route: Route<"Home", object | [![enter image description here][1]][1]undefined>; navigation: any; }) => DrawerNavigationOptions) | undefined; listeners?: Partial<...> | ... 1 more ... | undefined; initialParams?: object | undefined; } & { ...; }) | (IntrinsicAttributes ...'

Please refer to the image to see where the error originates.