Want to add multipli block instead of only one children

import type { Component } from "@builder.io/sdk";

const SeoSectionConfig: Component = {
	name: "SeoSection",
	inputs: [
		{
			name: "heading",
			type: "string",
			required: true,
			defaultValue: "Start your weight loss journey",
			friendlyName: "Heading",
			helperText: "The main heading of AssessmentCTA",
		},
		{
			name: "subheading",
			type: "string",
			required: true,
			defaultValue: "Assessments typically take between 5-10 minutes.",
			friendlyName: "Subheading",
			helperText: "The subheading displayed below the main heading",
		},
		{
			name: "links",
			friendlyName: "Anchor Links for Navigation Sidebar",
			type: "list",
			required: true,
			subFields: [
				{
					name: "anchorlinktext",
					friendlyName: "Text Displayed on the Link",
					type: "string",
					required: true,
				},
				{
					name: "sectionid",
					friendlyName: "Target Section ID (Scroll to Section)",
					type: "string",
					required: true,
				},
				{
					name: "description",
					friendlyName: "Description of the Section",
					type: "string",
				},
			],
		},
	],
	canHaveChildren: true,
	defaultChildren: [
		{
			"@type": "@builder.io/sdk:Element",
			component: {
				name: "Text",
				options: {
					text: "This is a default child block.",
				},
			},
		},
	],
};

export default SeoSectionConfig;

component code :-

import { withChildren } from "@builder.io/react";
import React from "react";
import type { PropsWithChildren, ReactNode } from "react";

import BlogNavigationSidebar from "../BlogNavigationSidebar";
import StickyAnchorWrapper from "../StickyAnchorWrapper";

export interface SEOSectionProps extends PropsWithChildren {
	heading: string;
	subheading: string;
	links?: {
		anchorlinktext: string;
		sectionid: string;
		description: string;
		additionalContent?: ReactNode;
	}[];
}

const SeoSection = ({
	heading,
	subheading,
	links,
	...props
}: SEOSectionProps) => {
	return (
		<div className='flex min-h-screen w-full flex-col gap-[40px] bg-transparent px-4 py-16 sm:gap-[32px] sm:px-[32px] sm:py-[80px] lg:flex-row lg:gap-[20px] lg:px-[40px]'>
			<aside className='flex w-full flex-col gap-6 bg-transparent sm:gap-[32px] lg:w-[47%] lg:gap-[40px]'>
				<div className='flex flex-col gap-2 sm:gap-3'>
					{heading && (
						<h2 className='text-3xl font-medium leading-lg tracking-[-0.02em] text-grey-900'>
							{heading}
						</h2>
					)}

					{subheading && (
						<p className='text-sm leading-sm text-grey-600'>{subheading}</p>
					)}
				</div>
				<div className='flex flex-col gap-3 sm:gap-4'>
					<p className='text-sm leading-sm text-grey-500'>Table of contents</p>
					{links && <BlogNavigationSidebar links={links} />}
					{links && (
						<StickyAnchorWrapper links={links} className='flex lg:hidden' />
					)}
				</div>
			</aside>

			<div className='flex w-full flex-col gap-[28px] bg-transparent sm:gap-[32px] lg:gap-[40px]'>
				{links?.map(
					(link, index) =>
						link && (
							<>
								<section
									key={index}
									id={link.sectionid}
									className='flex flex-col gap-3'
								>
									{link?.anchorlinktext && (
										<h5 className='text-2xl font-medium tracking-[-0.01em] text-grey-900'>
											{link.anchorlinktext}
										</h5>
									)}
									{link?.description && (
										<p className='text-base font-normal leading-base text-grey-700'>
											{link.description}
										</p>
									)}

									{/* Render additional content dynamically */}
									{link.additionalContent && (
										<div className='mt-4'>{link.additionalContent}</div>
									)}
								</section>
							</>
						),
				)}
				{props.children}
			</div>
		</div>
	);
};

// export default SeoSection;

// IMPORTANT: withChildren is required to enable child block functionality
export const HeroWithBuilderChildren = withChildren(SeoSection);

i with above config file i can add only one childern into my custom component

so i want like whenever someone add any link then below on that i can anything from builder