Trouble with page builder in switching from WordPress to Sanity.io

// /app/page.tsx
// Import necessary modules and types
import { sanityClient } from '@/app/sanity/client';
import dynamic from 'next/dynamic';
import React from 'react';

type Page = {
  _id: string
  title?: string
  queryParams?: { slug: string }
  slug?: {
    current: string
  }
}

// Dynamically import your components
const Hero = dynamic(() => import('@/app/ui/components/Hero'));
const CallToAction = dynamic(() => import('@/app/ui/components/CallToAction'));

// Define your component mapping
const sanityComponents = {
    hero: Hero,
    callToAction: CallToAction
    // Add other components as needed
};
export default async function Page({ params }: { params: { slug: string } }) {
  const pages = await sanityClient.fetch<Page[]>(`*[_type == "page" && slug.current == 'home']{"url": slug.current, "components": pageBuilder[]}`)
  return (
    <>  
        {pages.map((page, pageIndex) => (
            <div key={pageIndex}>
                {page.components.map((builder, builderIndex) => {
                    const SanityComponent = sanityComponents[builder._type];
                    if (!SanityComponent) {
                        console.log('missing component');
                        return null; // Handle missing component
                    }
                    return <SanityComponent {...builder} key={builder._key || builderIndex} />;
                })}
            </div>
        ))}
    </>
  );
}