im using nextjs 14 and this is how im using the context in the layout:

export default async function ServerLayout({ children, params }: ServerLayoutProps) {
    const supabase = createSupabaseServerClient()

    const { data: server } = await getServer(supabase, params.id)

    return (
        <div className="flex h-full bg-cyan-900">
            <div className="m-auto flex h-[92%] w-[92%] rounded-lg bg-primary p-2">
                <HydrationBoundary state={dehydrate(queryClient)}>
                    <ServerProvider initialData={server}>
                        {/* // HydrationBoundary is a Client Component, so hydration will happen there. */}
                        <ControlPanel className="">{children}</ControlPanel>
                    </ServerProvider>
                </HydrationBoundary>
            </div>
        </div>
    )
}