Rendering blocks from a "page builder" array in Sanity

PageBuilder.tsx

import type { KeyedObject, TypedObject } from "sanity";

import PageBuilderContent from "./pageBuilderContent";
import PageBuilderColumns from "./pageBuilderColumns";

const Components = {
  pageBuilderContent: PageBuilderContent,
  pageBuilderColumns: PageBuilderColumns,
};

export function PageBuilder({
  blocks,
}: {
  blocks: (TypedObject & KeyedObject)[];
}) {
  return pageBuilder.map((block, index) =>
    Components[block._type]
      ? React.createElement(Components[block._type], {
          key: block._key,
          ...block,
        })
      : null,
  );
}