title: A navigator can only contain 'Screen', 'Group' or 'React.Fragment' as its direct children
body: <pre><code>&lt;Stack.Navigator&gt;
    {
      isLogin ? &lt;ComponentA /&gt; :  &lt;ComponentB /&gt;
    }
  &lt;/Stack.Navigator&gt;
  
  
  const ComponentA = () =&gt; (
   arrA.map( v =&gt; &lt;Stack.Screen name={v.name} component={v.component} /&gt;)
  )
  
  const ComponentB = () =&gt; (
   arrB.map( v =&gt; &lt;Stack.Screen name={v.name} component={v.component} /&gt;)
  )
  </code></pre>
  <p>i want use some hooks in componentA and componentB, so i have to use them as function component, any help please?</p>
  <p><a href="https://github.com/react-navigation/react-navigation/blob/1179d56c5008270753feef41acdc1dbd2191efcf/packages/core/src/useNavigationBuilder.tsx#L104" rel="noreferrer">source code</a></p>