'Component' cannot be used as a JSX component (typed layout)

I'm getting the following type error from this line: {getLayout(<Component {...pageProps} />)}

'Component' cannot be used as a JSX component.
  Its element type 'Component<any, any, any> | ReactElement<any, any> | null' is not a valid JSX element.
    Type 'Component<any, any, any>' is not assignable to type 'Element | ElementClass | null'.
      Type 'Component<any, any, any>' 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("/Users/project/Documents/dev/projects/leleu-paisaje/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode'.
            Type '{}' is not assignable to type 'ReactNode'.ts(2786)

According to https://github.com/vercel/next.js/discussions/36725, I believe it should be correct. How can I solve this?

type NextPageWithLayout = NextPage & {
  getLayout?: (page: ReactElement) => ReactNode
}

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout
}

export default function App({ Component, pageProps }: AppPropsWithLayout) {
  const getLayout = Component.getLayout ?? ((page) => page)

  return (
    <>
      <TinaProvider>
        <DefaultSeo/>
        {getLayout(<Component {...pageProps} />)}
      </TinaProvider>
    </>
  )