I have a MainPage component, and in the MainPage component, there are PostList, Post, and Explain components as Stack.Screen. and i made Home component

this is my code

    const home = () => {
      return (
        <View>
        <Text>home</Text>
    </View>
        )
    }

    const MainPage = () => {
      return (
        <Stack.Navigator>
          <Stack.Screen
            name="PostList"
            component={PostList}
            options={{headerShown: false}}
          />
          <Stack.Screen
            name="Post"
            component={Post}
            options={{headerShown: false}}
          />
          <Stack.Screen
            name="Explain"
            component={Explain}
            options={{
              headerShown: false,
            }}
          />
        </Stack.Navigator>
      );
    };

And MainPage is wrapped with Tab.screen.

    <Tab.Navigator>
    <Tab.Screen
      name="MainPage"
      component={MainPage}
      options={{
        headerShown: false,
        tabBarStyle: {display: 'none'},

        tabBarIcon: ({color}) => (
          <FontAwesome5 name="list" size={20} style={{color}} />
        ),
        tabBarActiveTintColor: 'blue',
      }}
    />
    </Tab.Navigator>

I want to navigate to Home component using drawer navigation in MainPage component inside Tab.Screen.

so i tried like this code

    <Drawer.Navigator initialRouteName="Home">
    <Tab.Navigator>
    <Tab.Screen
      name="MainPage"
      component={MainPage}
      options={{
        headerShown: false,
      }}
    />
    </Tab.Navigator>
    </Drawer.Navigator>

but it doesn't work. How can i fix my code?