Help with nesting PageBuilder sections inside a grid

import Link from "next/link"

import { PortableText } from "@portabletext/react"

import { IoIosQuote } from "react-icons/io"

import { Image } from "@/components/shared"

import { Heading } from "@/components/ui"
import { Section } from "@/components/shared"

import type { BlockContent as BlockContentType } from "@/models/sections/block-content"

import Video from "./Video"
import { cn } from "@/lib/utils"

const BlockContent = ({ data }: { data: BlockContentType }) => {
  const blocks = data.body
  const { grid } = data

  let maxWidthClass

  if (grid === "extra-large") {
    maxWidthClass = "max-w-7xl"
  }

  if (grid === "large") {
    maxWidthClass = "max-w-6xl"
  }

  if (!blocks) {
    return null
  }

  return (
    <Section>
      <div
        className={cn(
          grid ? maxWidthClass : "max-w-none",
          "py-4 prose prose-blockquote:p-3 prose-blockquote:border-accent"
        )}
      >
        <PortableText
          value={blocks}
          components={{
            types: {
              image: ({ value }) => (
                <Image src={value} width={960} height={600} alt="" />
              ),
              quote: ({ value }) => <blockquote>{value.text}</blockquote>,
              youtube: ({ value }) => (
                <Video className="!px-0 !py-0" data={value} />
              )
            },

            marks: {
              internalLink: ({ children, value }) => (
                <Link href={`${value.slug.current}`}>{children}</Link>
              ),
              externalLink: ({ children, value }) => (
                <a href={`${value.link}`} target={value.blank ? "_blank" : ""}>
                  {children}
                </a>
              ),
              italic: ({ children }) => <i>{children}</i>,
              highlight: ({ children }) => (
                <mark className="bg-transparent box-decoration-clone py-[1px] px-1 my-0 mx-[0.10rem] rounded-md bg-gradient-to-r from-sun/90 to-sun/40">
                  {children}
                </mark>
              )
            },
            block: {
              h2: ({ children }) => <Heading level="h2">{children}</Heading>,
              h3: ({ children }) => <Heading level="h3">{children}</Heading>,
              h4: ({ children }) => <Heading level="h4">{children}</Heading>,
              h5: ({ children }) => <Heading level="h5">{children}</Heading>,
              normal: ({ children }) => <p>{children}</p>,
              blockquote: ({ children }) => (
                <div className="py-1 not-prose">
                  <blockquote className="flex">
                    <IoIosQuote />
                    <p className="pl-1 text-lg font-semibold">{children}</p>
                  </blockquote>
                </div>
              )
            }
          }}
        />
      </div>
    </Section>
  )
}

export default BlockContent

const someFlag = true // or false, or could be a function returning a boolean

return (
  <>
    <h2>Any other preceding html or React components</h2>
    { someFlag &&
       <h3>Some html or react compoents to show if someFlag is true</h3>
         ... any lines of these ...
    }
    <h2>html, components coming after -- or more { flag && } blocks(!) </h2>
  </>
)

import {RiLayoutGridLine} from 'react-icons/ri';
import {defineField} from 'sanity';


const grid = defineField({
	name: 'grid',
	type: 'object',
	title: 'Grid',
	hidden: true,
	description: 'This is a simple grid component, all items are going to be equally wide',
	icon: RiLayoutGridLine,
	groups: [
		{
			name: 'columns',
			title: 'Columns'
		},
		{
			name: 'items',
			title: 'Items'
		}
	],
	fields: [
		{
			title: 'Title',
			name: 'title',
			type: 'string'
		},
		{
			name: 'columns',
			title: 'Columns',
			type: 'columns',
			group: 'columns'
		},
		{
			name: 'items',
			title: 'Items',
			group: 'items',
			type: 'array',
			options: {
				layout: 'grid'
			},
			of: [{type: 'blockContent'}}]
		}
	],
	preview: {
		select: {
			title: 'title'
		},
		prepare({title}: {title: string}) {
			return {
				title: `${title}`
			};
		}
	}
});

export default grid;