Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes' on react layout component

Question

This is the code for the layout

import type { NextPage } from 'next'
import React from 'react'
 
interface LayoutProps {
 children: React.ReactNode;
}
 
const Layout: NextPage = ({ children }: LayoutProps) => {
 return (
   <>
     <div>
       <main>
         {children}
       </main>
     </div>
   </>
 );
};
 
 
export default Layout

The error appears when I hover over the start of the layout element in this block of code which is the main part of the app.

import type { AppProps } from 'next/app'
import Layout from '../components/Layout'
import '../styles/globals.css'
 
function MyApp({ Component, pageProps }: AppProps) {
 return (
   <Layout>
     <Component {...pageProps} />
   </Layout>
 )
}
export default MyApp

I thought at first that it was because I didn't have the right type for the children but I made a type for the children but I made an interface for that but I still am receiving the error.

Answer 1

Try with generics

import type { NextPage } from 'next'
import React from 'react'
 
interface LayoutProps {
 children: React.ReactNode;
}
 
const Layout: NextPage<LayoutProps> = ({ children }) => {
 return (
   <>
     <div>
       <main>
         {children}
       </main>
     </div>
   </>
 );
};
 
 
export default Layout