Issue while including OOTB Teaser component in custom component with HTL tag "data-sly-resource"

[VikasGs5]

I am creating one custom component (let's say - resorts-card) and for that I want to include the Teaser component present in the project. But when I am doing so, the dialog for the main component (resorts-card) is opening fine but then the inner component (Teaser) - for this dialog is not opening. Also, when i checked the Network tab for the issue, the call which is being made when I try to author the inner cmp (Teaser), it is getting as 404.
Question - Do we have any known issues for including the Teaser cmp in AEM, as i tried including Title, Image, Button components & it worked well with those.
Although the XML & HTML content is pretty straight-forward but putting down just for the reference.
Resorts-card XML (main)

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
    jcr:primaryType="cq:Component"
    jcr:title="Resorts Card"
    cq:isContainer="{Boolean}true"
    componentGroup="Demo - Content"/>

CQ Dialog XML

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Resorts Card"
    cq:isContainer="{Boolean}true"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs"
                maximized="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <properties
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Properties"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <modalTitle
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                fieldLabel="Title"
                                name="./title"
                                required="{Boolean}false" />
                            <columncount
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
                                fieldDescription="Enter the number of teaser cards required"
                                fieldLabel="Teaser Card Count"
                                name="./cardCount"
                                value="{Long}0"/>
                        </items>
                    </properties>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

HTML file 

<sly data-sly-resource="${'teaser' @ resourceType='demo/components/teaser', decoration=true}"></sly>

Whereas when I use below lines, it works fine for Title, Button, Image

<sly data-sly-resource="${'title' @ resourceType='demo/components/title', decoration=true}"></sly>
<sly data-sly-resource="${'image' @ resourceType='demo/components/image', decoration=true}"></sly>
<sly data-sly-resource="${'button' @ resourceType='demo/components/button', decoration=true}"></sly>