AEM SPA React setup Experience Fragment

Question

I need to create experience fragment in AEM SPA React framework. Bascially, I copied code setting from this article https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-6-4-with-spa-editor-how-to-use-the-experience-fragments/m-p/322742

But it did not give details for how component under JCR node setup , e.g src/main/content/jcr_root/apps/project/components/functional/spasamples/experiencefragment

So I setup .content.xml and other files like below:

enter image description here

my .content.xml :

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    cq:styleElements="[div,section,article,main,aside,header,footer]"
    jcr:primaryType="cq:Component"
    jcr:title="Experience Fragment"
    componentGroup="POC SPA React - Content"/>

my _cq_editConfig.xml:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    cq:actions="[EDIT,DELETE,INSERT,COPYMOVE]"
    jcr:primaryType="cq:EditConfig">
    <cq:dropTargets jcr:primaryType="nt:unstructured">
        <experiencefragment
            jcr:primaryType="cq:DropTargetConfig"
            accept="[text/html]"
            groups="[content]"
            propertyName="./fragmentVariationPath"/>
    </cq:dropTargets>
    <cq:listeners
        jcr:primaryType="nt:unstructured"
        afterinsert="REFRESH_PAGE"/>
    <cq:actionConfigs jcr:primaryType="nt:unstructured">
        <editInNewTab
            jcr:primaryType="nt:unstructured"
            handler="Granite.author.experienceFragments &amp;&amp; Granite.author.experienceFragments.actions.editInNewTab"
            icon="edit"
            text="Edit"/>
    </cq:actionConfigs>
</jcr:root>

my content.html

<sly data-sly-use.body="body.js" data-sly-resource="${body.resourcePath @ selectors=[]}"/>

my customfooterlibs.html

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
    <sly data-sly-call="${clientlib.js @ categories='global_pdc.base'}"/>
</sly>

my customheaderlibs.html

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.js @ categories='global_pdc.dependencies'}"/>
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.css @ categories='global_pdc.base'}"/>

<!--/* Include Context Hub */-->
<sly data-sly-resource="${'contexthub' @ resourceType='granite/contexthub/components/contexthub'}"/>

on my test page, i tried to drop experience fragment from the list, but it is not showing up like other component does

Any advise? Thanks