NextJS per page layout not working with typescript - node.js

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;