Как правильно работать с навигацией к экранам, расположенным в отдельных навигаторах, непосредственно в React Navigator 5?

У меня есть сценарий приложения, в котором у меня есть навигатор нижних вкладок в качестве базовой вкладки навигатора с Главная, Продукты ... в качестве моих вкладок:

<Tab.Navigator
    screenOptions={{
      headerShown: true,
    }}
    tabBarOptions={{
      showLabel: false,
      activeTintColor: MyColors.COLOR_ACCENT,
    }}>
    <Tab.Screen
      name="Home"
      component={HomeStack}
      options={{
        tabBarIcon: ({color, size}) => (
          <Icon name="home" color={color} size={size} />
        ),
      }}
    />

    <Tab.Screen
      name="Product"
      component={ProductStack}
      options={{
        tabBarIcon: ({color, size}) => (
          <Icon name="business-center" color={color} size={size} />
        ),
      }}
    />
    <Tab.Screen
      name="Request"
      component={MedRequest}
      options={{
        color: MyColors.COLOR_PRIMARY,
        tabBarIcon: ({color, size}) => (
          <Icon
            name="near-me"
            color={color}
            size={35}
            style={{transform: [{rotateZ: '20deg'}]}}
          />
        ),
      }}
    />
    <Tab.Screen
      name="Reminder"
      component={Reminder}
      options={{
        tabBarIcon: ({color, size}) => (
          <Icon name="alarm" color={color} size={size} />
        ),
      }}
    />
    <Tab.Screen
      name="Location"
      component={LocationStack}
      options={{
        tabBarIcon: ({color, size}) => (
          <Icon name="location-on" color={color} size={size} />
        ),
      }}
    />
  </Tab.Navigator>

Давайте рассмотрим мои первые 2 экрана из нижних вкладок. Первый - Дом. Он содержит список из 5 самых популярных продуктов и ссылку «просмотреть все», по которой можно перейти ко второй вкладке продуктов.

Предполагается, что для каждого отдельного перечисленного продукта необходимо перейти на страницу сведений о продукте. Поскольку навигация productDetail не определена в навигаторе нижних вкладок, я попытался решить эту проблему, создав новый навигатор стека дома через homeStack, который выглядит следующим образом:

<Stack.Navigator
    screenOptions={{
      headerShown: false,
    }}>
    <Stack.Screen name="Home" component={Home} />
    <Stack.Screen name="Notifications" component={Notifications} />
    <Stack.Screen name="ProductDetail" component={ProductDetail} />
    <Stack.Screen name="AuthStack" component={AuthStack} />
    <Stack.Screen name="BlogStack" component={BlogStack} />
    <Stack.Screen name="BlogDetail" component={BlogDetail} />
    <Stack.Screen name="Cart" component={CartStack} />
  </Stack.Navigator>

Теперь, когда у нас есть навигатор productDetail в обработчике, я могу перейти к деталям продукта. Точно так же на нижней вкладке продукта есть еще один навигатор стека, как ProductStack вверху, который помогает в навигации по его различным ссылкам. Это как:

<Stack.Navigator
    screenOptions={{
      headerShown: false,
    }}>
    <Stack.Screen name="Product" component={Product} />
    <Stack.Screen name="CartStack" component={CartStack} />
    <Stack.Screen name="ProductDetail" component={ProductDetail} />
  </Stack.Navigator>

Меня больше всего беспокоит то, что я включал ProductDetail и CartStack в качестве элементов навигаторов более чем в одном месте, и мне кажется, что я делаю это неправильно.

Также может ли эта многоуровневая навигатор привести к проблемам с производительностью?

Также cartStack, к которому я обращаюсь при прямом переходе к productDetail с главного экрана, вызывает исчезновение нижних вкладок.

Я здесь совершенно неправильно разбираюсь в ситуации ?? Есть ли более простой способ сделать это, который не приходил мне в голову?