Typo3 no rendering of a custom content element in the frontend

I have the following problem.

I have created a custom content element, as described in the Typo3 documentation, in a separate extension.

Doc custom content element

In this, everything works up to the point at which the frontend is to be rendered. No error is displayed and core content elements of Typo3 such as bullet are displayed normally. As recommended in the documentation, I have built my own extension for the page according to the sitepackage documentation.

Doc sitepackage

I therefore have two extensions. In the sitepackage, the content is output in Default.html via data processing.

Code Default.html content rendering via data processing

<f:layout name="Default" />
<f:section name="Main">
    <main role="main" class="mainContainer">
        <div class="row">
            <div class="col-md-12">
                <f:for each="{mainContent}" as="contentElement">
                    <f:cObject
                    typoscriptObjectPath="tt_content.{contentElement.data.CType}"
                    data="{contentElement.data}"
                    table="tt_content"
                    />
                </f:for>
            </div>
        </div>
    </main>
</f:section>

My setup.typoscript files look like this. setup.typoscript of the custom content element

lib.contentElement {
  templateRootPaths.200 = EXT:accordion_contentelement/Resources/Private/Templates/
}

tt_content {
    accordion_contentelement =< lib.contentelement
    accordion_contentelement {
        templateName = AccordionElement
    }
}

setup.typoscript of the sitepackage

@import 'EXT:fluid_styled_content/Configuration/TypoScript/setup.typoscript'
@import 'EXT:site_package/Configuration/TypoScript/Setup/CssFileInclusion.typoscript'

page = PAGE
page {
  typeNum = 0
}

page.10 = FLUIDTEMPLATE
page.10 {
  templateName = TEXT
  templateName {
    cObject = TEXT
    cObject {
      data = pagelayout
      required = 1
      case = ucfirst
      split {
        token = pagets__
        cObjNum = 1
        1.current = 1
      }
    }

    ifEmpty = Default
    }

    templateRootPaths {
        0 = EXT:site_package/Resources/Private/Templates/Page/
        1 = {$page.fluidtemplate.templateRootPath}
    }

    partialRootPaths {
        0 = EXT:site_package/Resources/Private/Partials/Page/
        1 = {$page.fluidtemplate.partialRootPath}
    }

    layoutRootPaths {
        0 = EXT:site_package/Resources/Private/Layouts/Page/
        1 = {$page.fluidtemplate.layoutRootPath}
    }
    dataProcessing {
        10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
        10 {
            levels = 1
            includeSpacer = 1
            as = mainnavigation
        }
        20 = TYPO3\CMS\Frontend\DataProcessing\DatabaseQueryProcessor
        20 {
            table = tt_content
            orderBy = sorting
            where = colPos = 0
            as = mainContent
        }
    }
}

config {
  # Adjust the title tag to be displayed as “website - page title”
  pageTitleSeparator = -
  pageTitleSeparator.noTrimWrap = | | |

  # Display the Admin Panel at the bottom of pages to logged in backend users
  admPanel = 1
}

I also tried to get an output with lib.dynamicContent with the same result, no error message and only standard content elements in the frontend.

code in setup.typoscript

lib.dynamicContent = COA
lib.dynamicContent {
   10 = LOAD_REGISTER
   10.colPos.cObject = TEXT
   10.colPos.cObject {
      field = colPos
      ifEmpty.cObject = TEXT
      ifEmpty.cObject {
         value.current = 1
         ifEmpty = 0
      }
   }
   20 = CONTENT
   20 {
      table = tt_content
      select {
         orderBy = sorting
         where = {#colPos}={register:colPos}
         where.insertData = 1
      }
   }
   90 = RESTORE_REGISTER
}

Code Default.html content rendering via lib.dynamicContent

<f:layout name="Default" />
<f:section name="Main">
    <main role="main" class="mainContainer">
        <div class="row">
            <div class="col-md-12">
                <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '0'}" />
            </div>
        </div>
    </main>
</f:section>

I use the Typo3 version 12.4.7.

I hope someone can help. Thanke You

you defined

lib.contentElement { 
   templateRootPaths.200 = 

but then used

   ... =< lib.contentelement 

That are different objects.
TypoScript is case-sensitive!