Error on _app.tsx types using react query

type NextPageWithLayout = NextPage & {
    Layout?: React.ElementType
    authenticate?: boolean
}

type AppPropsWithLayout = AppProps & {
    Component: NextPageWithLayout
    pageProps: { dehydratedState: DehydratedState }
}

const queryCache = new QueryCache()
const mutationCache = new MutationCache()

const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
    const queryClient: QueryClient = useMemo(() => new QueryClient({ queryCache, mutationCache }), [])
    const Layout = Component.Layout ?? Noop
    const authProps: boolean | undefined = Component.authenticate

    return (
        <QueryClientProvider client={queryClient}>
            <Hydrate state={pageProps.dehydratedState}>
                <AppSettings>
                    <UIProvider>
                        <ModalProvider>
                            <>
                                <DefaultSeo />
                                {authProps ? (
                                    <PrivateRoute authProps={authProps}>
                                        <Layout {...pageProps}>
                                            <Component {...pageProps} />
                                        </Layout>
                                    </PrivateRoute>
                                ) : (
                                    <Layout {...pageProps}>
                                        <Component {...pageProps} />
                                    </Layout>
                                )}
                                <ToastContainer autoClose={2000} theme="colored" />
                                <ManagedModal />
                            </>
                        </ModalProvider>
                    </UIProvider>
                </AppSettings>
                <ReactQueryDevtools />
            </Hydrate>
        </QueryClientProvider>
    )
}

type NextPageWithLayout = NextPage & {
    Layout?: React.ElementType
    authenticate?: boolean
}

type AppPropsWithLayout = AppProps & {
    Component: NextPageWithLayout
    pageProps: { dehydratedState: DehydratedState }
}

const queryCache = new QueryCache()
const mutationCache = new MutationCache()

const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
    const queryClient: QueryClient = useMemo(() => new QueryClient({ queryCache, mutationCache }), [])
    const Layout = Component.Layout ?? Noop
    const authProps: boolean | undefined = Component.authenticate

    return (
        <QueryClientProvider client={queryClient}>
            <Hydrate state={pageProps.dehydratedState}>
                <AppSettings>
                    <UIProvider>
                        <ModalProvider>
                            <>
                                <DefaultSeo />
                                {authProps ? (
                                    <PrivateRoute authProps={authProps}>
                                        <Layout {...pageProps}>
                                            <Component {...pageProps} />
                                        </Layout>
                                    </PrivateRoute>
                                ) : (
                                    <Layout {...pageProps}>
                                        <Component {...pageProps} />
                                    </Layout>
                                )}
                                <ToastContainer autoClose={2000} theme="colored" />
                                <ManagedModal />
                            </>
                        </ModalProvider>
                    </UIProvider>
                </AppSettings>
                <ReactQueryDevtools />
            </Hydrate>
        </QueryClientProvider>
    )
}