NextJS per page layout not working with typescript

Question

I am developing new application in NextJS 12 using typescript. I have defined two pages register and home page and i want to apply different layout to this pages, i have followed official next js documentation for this, i can see the "Registration Page" text in browser but layout not applying on page output, am i missing something in code? below is my code.

register.tsx

const UserRegistration: NextPageWithLayout = () => {
    return <h1>Registration Page</h1>
}

UserRegistration.getLayout = (page: ReactElement) => {
    return (
        <DefaultLayout>{page}</DefaultLayout>
    )
}

export default UserRegistration;

_app.tsx

function MyApp({ Component, pageProps }: AppPropsWithLayout) {
  const getLayout = Component.getLayout || ((page) => page)
  return getLayout(<Component {...pageProps} />)
}

export default MyApp

type.ts

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

export type AppPropsWithLayout = AppProps & { Component: NextPageWithLayout }

export type DefaultLayoutType = { children: ReactNode }

layout.tsx

const DefaultLayout = ({ children }: DefaultLayoutType) => {
    return(
        <div id="main">
            <nav>
                <li>
                    Home
                </li>
            </nav>
            {children}
        </div>
    )
}

export default DefaultLayout;