title: Next.js: 'Component' cannot be used as a JSX component
body: <p>Why do I get error in this line?</p>
  <pre><code>&lt;Provider store={store}&gt;{getLayout?(&lt;Component {...pageProps} /&gt;)}&lt;/Provider&gt;
  </code></pre>
  <pre><code>(parameter) Component: NextComponentType&lt;NextPageContext, any, {}&gt; &amp; NextPageWithLayout
  'Component' cannot be used as a JSX component.
    Its element type 'ReactElement&lt;any, any&gt; | Component&lt;{}, any, any&gt;' is not a valid JSX element.
      Type 'Component&lt;{}, any, any&gt;' is not assignable to type 'Element | ElementClass'.
        Type 'Component&lt;{}, any, any&gt;' 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/kukodajanos/Workspace/Tikex/Portal/Team/node_modules/@types/styled-jsx/node_modules/@types/react/index&quot;).ReactNode'.
              Type '{}' is not assignable to type 'ReactNode'.
  </code></pre>
  <p>Full component:</p>
  <pre class="lang-js prettyprint-override"><code>import axios from 'axios'
  import type { NextPage } from 'next'
  import type { AppProps } from 'next/app'
  import { ReactElement, ReactNode, useEffect } from 'react'
  import { Provider } from 'react-redux'
  import Layout from '../components/Layout'
  import { setAuthnRes } from '../slices/User'
  import { store } from '../store'
  import '../styles/globals.scss'
  import { baseURL } from '../utils/baseURL'
  
  type NextPageWithLayout = NextPage &amp; {
      getLayout?: (page: ReactElement) =&gt; ReactNode
  }
  
  type AppPropsWithLayout = AppProps &amp; {
      Component: NextPageWithLayout
  }
  
  axios.defaults.baseURL = baseURL(
      process.env.NEXT_PUBLIC_ENVIRONMENT ?? 'local',
      true
  )
  
  axios.defaults.withCredentials = true
  
  function MyApp({ Component, pageProps }: AppPropsWithLayout) {
      const dispatch = store.dispatch
      const authnUserResp = store.getState().authnUser?.resp
  
      useEffect(() =&gt; {
          if (!authnUserResp) {
              axios({
                  method: 'get',
                  url: 'me',
                  headers: { crossDomain: true },
              }).then((res) =&gt; {
                  dispatch(setAuthnRes(res.data))
              })
          }
      })
  
      const getLayout = Component.getLayout ?? ((page) =&gt; &lt;Layout&gt;{page}&lt;/Layout&gt;)
  
      return (
          &lt;Provider store={store}&gt;{getLayout?(&lt;Component {...pageProps} /&gt;)}&lt;/Provider&gt; // &lt;--- HERE
      )
  }
  
  export default MyApp
  </code></pre>
  <p>I upgraded Next.js to the most recent one, maybe that causes some issue?</p>
  <pre><code>&quot;next&quot;: &quot;12.1.0&quot;,
  </code></pre>
  <p>Do I need both normal and TypeScript reference in <code>package.json</code>, do you know?</p>
  <pre class="lang-js prettyprint-override"><code>&quot;@types/next&quot;: &quot;^9.0.0&quot;,
  &quot;next&quot;: &quot;12.1.0&quot;,
  </code></pre>