title: 'Stack.Navigator' cannot be used as a JSX component
body: <p>There is a type issue using react navigation, when use <code>Stack.Navigation</code> or <code>Stack.Group</code> from <code>createNativeStackNavigator</code></p>
  <p>The issue saids that the types dont match with <code>JSX.element</code> at the end of the messages is more specific: <code> Type '{}' is not assignable to type 'ReactNode'</code></p>
  <p>Whole message:</p>
  <pre><code>'Stack.Navigator' cannot be used as a JSX component.
    Its element type 'ReactElement&lt;any, any&gt; | Component&lt;Omit&lt;DefaultRouterOptions&lt;string&gt; &amp; { id?: string | undefined; children: ReactNode; screenListeners?: Partial&lt;...&gt; | ... 1 more ... | undefined; screenOptions?: NativeStackNavigationOptions | ... 1 more ... | undefined; defaultScreenOptions?: NativeStackNavigationOptions | ... 1 mo...' is not a valid JSX element.
      Type 'Component&lt;Omit&lt;DefaultRouterOptions&lt;string&gt; &amp; { id?: string | undefined; children: ReactNode; screenListeners?: Partial&lt;{ transitionStart: EventListenerCallback&lt;NativeStackNavigationEventMap, &quot;transitionStart&quot;&gt;; ... 4 more ...; beforeRemove: EventListenerCallback&lt;...&gt;; }&gt; | ((props: { ...; }) =&gt; Partial&lt;...&gt;) | unde...' is not assignable to type 'Element | ElementClass | null'.
        Type 'Component&lt;Omit&lt;DefaultRouterOptions&lt;string&gt; &amp; { id?: string | undefined; children: ReactNode; screenListeners?: Partial&lt;{ transitionStart: EventListenerCallback&lt;NativeStackNavigationEventMap, &quot;transitionStart&quot;&gt;; ... 4 more ...; beforeRemove: EventListenerCallback&lt;...&gt;; }&gt; | ((props: { ...; }) =&gt; Partial&lt;...&gt;) | unde...' is not assignable to type 'ElementClass'.
          The types returned by 'render()' are incompatible between these types.
            Type 'React.ReactNode' is not assignable to type 'import(&quot;/Users/mrcmesen/Novum/ice-app/plant-maintenance/node_modules/@types/react-native/node_modules/@types/react/index&quot;).ReactNode'.
              Type '{}' is not assignable to type 'ReactNode'.ts(2786)
  </code></pre>
  <p>The way to reprocede is just install these versions and run the project.</p>
  <pre><code>&quot;react&quot;: &quot;17.0.1&quot;,
  &quot;react-dom&quot;: &quot;17.0.1&quot;,
  &quot;react-native&quot;: &quot;0.64.3&quot;,
  &quot;@react-navigation/bottom-tabs&quot;: &quot;^6.3.1&quot;,
  &quot;@react-navigation/native&quot;: &quot;^6.0.10&quot;,
  &quot;@react-navigation/native-stack&quot;: &quot;^6.6.1&quot;,
  &quot;typescript&quot;: &quot;^4.6.3&quot;
  </code></pre>
  <p>My application still works and I don't have any error in console. I don't know why I have a red line under Stack.Navigator. But when I hover on it, it says that 'Stack.Navigator' cannot be used as a JSX component.</p>
  <p><a href="https://i.stack.imgur.com/jFuOs.png" rel="noreferrer"><img src="https://i.stack.imgur.com/jFuOs.png" alt="enter image description here" /></a></p>
  <p>I also got the same error when using MaterialCommunityIcons</p>
  <h2>Update at 12-04-22 <em>For React-Navigation</em></h2>
  <p>This is a issue related to the version of <code>@types/react</code> you need to add this minimum resolution to your project to solve it:</p>
  <pre><code>&quot;dependencies&quot;: {
    &quot;@types/react&quot;: &quot;^17.0.41&quot;
  }
  </code></pre>
  <p>Reference: <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/issues/59765#issuecomment-1092891129" rel="noreferrer">Github</a>
  Credits: <a href="https://stackoverflow.com/users/10547493/lucasmds">@lucasmds</a></p>