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

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

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

<script lang="ts">
    import * as BuilderSDK from '';
    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);}

<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}
        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)}
        <button class="hidden">next</button>
    {#if tabList && tabList?.length != 0}

**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": "",
                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

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

  import { isPreviewing, Content } from "";
  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();


  {#if canShowContent}
    Content Not Found

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

import { fetchOneEntry, getBuilderSearchParams } from "";

/** @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};