NextJS per page layout and Recoil gives error "This component must be used inside a <RecoilRoot> component"

I am trying to get Recoil to work with nextjs. I am trying to use per page layout as described here:https://nextjs.org/docs/basic-features/layouts#per-page-layouts

But I'm twisting it slightly, where I don't have a layout but rather a per page component that I'd like to add to the header.

I am getting the following error:

Error: This component must be used inside a <RecoilRoot> component

My _app.tsx looks something like this:

function MyApp({ Component, pageProps }) {
    
    return <RecoilRoot>
        <Head>
            <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
        </Head>
        <MantineProvider withGlobalStyles withNormalizeCSS theme={{colorScheme: 'light'}}>
            <AppShell
                padding="md"
                fixed
                header={<AppHeader>{Component.PageHeader}</AppHeader>}> // <--- page header added
                <Component {...pageProps} />
            </AppShell>
        </MantineProvider>
    </RecoilRoot>;
} 

and then the page header is defined on the actual page like so:

Page.getHeader = () => {
    const [state, setState] = useRecoilState(recoilState);
    return <div>Header</div>
};