Tab Navigator inside Stack Navigator Cause Re-Render, react-native, react-navigation v6

Question

I did react-navigation setup in my project. I want to use bottom-tab and other screen which can easily access within app. here is my configuration for navigators.

const TabScreens = () => (
            <Tab.Navigator
              screenOptions={{
                headerShown: false,
                tabBarShowLabel: false,
                tabBarInactiveTintColor: theme.SecondaryColor,
                tabBarActiveTintColor: theme.PrimaryColor,
                tabBarStyle: {
                  position: 'absolute',
                  height: 60,
                  borderTopRightRadius: 21,
                  borderTopLeftRadius: 21,
                  borderTopWidth: 1.75,
                  borderStartWidth: 1.75,
                  borderEndWidth: 1.75,
                  borderColor: theme.TextinputBorderColor,
                },
              }}>
              <Tab.Screen
                name="homeScreen"
                component={HomeScreen}
                options={{
                  tabBarIcon: ({color, size}) => (
                    <Feather name="home" color={color} size={size} />
                  ),
                }}
              />
              <Tab.Screen
                name="myGalaxyScreen"
                component={MyGalaxyScreen}
                options={{
                  tabBarIcon: ({color, size}) => (
                    <Ionicons name="planet-outline" color={color} size={size} />
                  ),
                }}
              />
              <Tab.Screen
                name="createGalaxyScreen"
                component={CreateGalaxyScreen}
                options={{
                  unmountOnBlur: true,
                  tabBarStyle: {display: 'none'},
                  tabBarIcon: ({color, size}) => (
                    <Feather
                      name="plus"
                      color={theme.WhiteColor}
                      size={size + 10}
                    />
                  ),
                  tabBarButton: props => <CustomTabBarButton {...props} />,
                }}
              />
              <Tab.Screen
                name="activityScreen"
                component={ActivityScreen}
                options={{
                  tabBarIcon: ({color, size}) => (
                    <MaterialCommunityIcons
                      name="bell-outline"
                      color={color}
                      size={size}
                    />
                  ),
                }}
              />
              <Tab.Screen
                name="profileScreen"
                component={ProfileScreen}
                options={{
                  tabBarIcon: ({color, size}) => (
                    <MaterialCommunityIcons
                      name="account-outline"
                      color={color}
                      size={size}
                    />
                  ),
                }}
              />
            </Tab.Navigator>
)

....

<NavigationContainer>
          <Stack.Navigator screenOptions={{headerShown: false}}>
            <Stack.Screen name="TabStack" component={TabScreens} />
            <Stack.Screen name="UpdateProfile" component={UpdateProfileScreen} />
            <Stack.Screen
              name="ManagePhotos"
              component={ManagePhotosScreen}
            />
          </Stack.Navigator>
</NavigationContainer>

in above code I made a function which return me tab-navigators and I mounted into stack-navigator as a screen. everything is working fine but not with redux.

Problem:

• when I do dispatch action within any of tab-navigator screen (i.e, createGalaxyScreen) then whole screen is re-render (lost all the states).

Test use-case:

• For verify the issue, I just remove stack-navigator and only setup tab-navigator and It's working fine with redux even.

Please correct me if I setup wrong.

Expected: I want to use both navigator, because I need more screen for extra pages. And do not want re-render issue.