I am working with Reactjs and using Nextjs,Right now i am trying to "Use multiple Headers" (according to condition) , I used following code in my "about.js" file

import React from 'react'
import NestedLayout from '../components/NestedLayout'
import Footer from '../components/Footer'

function About() {
  return (
    <>
 <>
    //CODE HERE
 </>
  </>
  )
}
export default About
About.getLayout= function PageLayout(page)
{
    return(
        <>
            <NestedLayout />
            {page}
            <Footer />
        </>
    )
}

And here is my "_app.js" file

import React from 'react';
import App from 'next/app';
import Layout from '../components/layout'
import type { AppProps } from 'next/app'
function MyApp({ Component, pageProps }: AppProps) {
  
  if(Component.getLayout)
  {
      return Component.getLayout(<Component{...pageProps} />)
  }
  return (
    <>
     <Layout>
     <Component {...pageProps} />
     </Layout>
    </>
   )
}
export default MyApp

But i am getting following error,How can i solve this ?

any
Property 'getLayout' does not exist on type 'NextComponentType<NextPageContext, any, {}>'.
  Property 'getLayout' does not exist on type 'ComponentClass<{}, any> & { getInitialProps?(context: NextPageContext): any; }'.ts(2339)