How to working with list with custom component inside ? magnolia

Question

So i have a list of magnolia code the code suppose to look like this ,

<ul>
    [#list cmsfn.children(content.accordionList, "mgnl:contentNode") as accordionList ]
        <div class="accordion">
            <div class="accordion-item">
                <button id="accordion-button-1" aria-expanded="false">
                    <span class="accordion-title">${cmsfn.decode(accordionList).text!}</span>
                    <span class="icon" aria-hidden="true"></span>
                </button>
                <div class="accordion-content">
                    [@cms.area name="child"/]
                </div>
            </div>
        </div>
    [/#list]
</ul>

the problem is when I try to add two list item and then want to add custom component inside the 2 list item. When I add custom text on first list item it also rendering on second list item.

I expect when I add the text on first list item , it just show on the first item and so on. So it don't rendering the two item when I only add on first list item.