Svelte Component- Add Block field not working as expected in visual Editor

Technical Questions
6

yes @manish-sharma, I am using version - 0.12.0 of builder.io Svelte SDK

yes this is my svelte component code which i am using to create a Tab-

<script lang="ts">
    import * as BuilderSDK from '@builder.io/sdk-svelte';
    
    export let tabList: any[];
    export let builderBlock:any;
    export let builderContext:any [];
    let activeTab:any = 0;

    function selectTab(tab:any) {
        activeTab = tab;
    }

    $:{console.log("Active Tab", tabList[activeTab], builderBlock, builderContext);}
</script>

<div class="lg:mx-[130px] section-header overflow-hidden">
    <h2 class="mx-4 mb-5 text-3xl bold">Stay up to date</h2>
    <div class="tabs-wrap">
        <button class="hidden">prev</button>
        <div class="tabs flex">
        {#if tabList}
        {#each tabList as tab, index}
        <button
        class="py-6 px-4 border-b-4 border-solid cursor-pointer font-bold text-xl leading-normal whitespace-nowrap text-[#333] {activeTab === index ? 'border-green-500' : 'border-[#fff]'}"
        on:click={() => selectTab(index)}
      >
        {tab.tabName}
      </button>
        {/each}
        {/if}
        </div>
        <button class="hidden">next</button>
    </div>
    {#if tabList && tabList?.length != 0}
        <slot/>
        <BuilderSDK.Blocks
        parent={builderBlock?.id}
        path={`component?.options?.tabList?.${activeTab}.children`}
        blocks={tabList[activeTab]?.children}
        />
      {/if}
</div>

**This is how i am registering the component and all it fields-

export const CUSTOM_COMPONENTS = [
  {
    component: TabSection,
    name: "TabFields",
    canHaveChildren: true,
    inputs: [
      {
        name: "tabList",
        type: "list",
        subFields: [
          {
            name: "tabName",
            type: "string",
          },
          {
            name: "children",
            type: "blocks",
            defaultValue: [
              {
                "@type": "@builder.io/sdk:Element",
                component: {
                  name: "Text",
                  options: {
                    text: "this is editable within builder ",
                  },
                },
                responsiveStyles: {
                  large: {
                    display: "flex",
                    flexDirection: "column",
                    position: "relative",
                    flexShrink: "0",
                    boxSizing: "border-box",
                    marginTop: "8px",
                    lineHeight: "normal",
                    height: "auto",
                    textAlign: "center",
                  },
                },
              },
            ],
          },
        ],
      },
    ],
  },
];

This is my configuration inside […catchall] route to connect to builder.io

following code is inside routes/[…catchall]/+page.svelte

<script>
  import { isPreviewing, Content } from "@builder.io/sdk-svelte";
  import { CUSTOM_COMPONENTS } from '../../registerComponents/componentsRegistry'

	// this data comes from the function in `+page.server.js`, which runs on the server only
	export let data;

  // we want to show unpublished content when in preview mode.
  const canShowContent = data.content || isPreviewing();
</script>

<svelte:head>
  <title>Home</title>
</svelte:head>

<main>
  {#if canShowContent}
    <Content
      model="page"
      content={data.content}
      apiKey={import.meta.env.VITE_BUILDER_PUBLIC_API_KEY}
      customComponents={CUSTOM_COMPONENTS}
    />
  {:else}
    Content Not Found
  {/if}
</main>

following code is inside routes/[…catchall]/+page.server.js

import { fetchOneEntry, getBuilderSearchParams } from "@builder.io/sdk-svelte";

/** @type {import('./$types').PageServerLoad} */
export async function load(event) {
const content = await fetchOneEntry({
    model: "page",
    apiKey: import.meta.env.VITE_BUILDER_PUBLIC_API_KEY,
    options: getBuilderSearchParams(event.url.searchParams),
    userAttributes: {
      urlPath: event.url.pathname || '/',
    },
  });

  return { content};
}