Collapsing dxi-item in dx-forms

Question

We are currently using dx-forms and dxi-items in our page to add sections. I am trying to make these sections collapsable but looks like collapsable cannot be done with dx-forms and we should be using dx-accordion. There no examplse how we can use the dx-accordion with dx-forms

<div id="create-new-container">
    <p class="title">New</p>
    <dx-form class="create-form"
        [(formData)]="newData"
        [showRequiredMark]="false"
        labelLocation="left"
        >
        <dxi-item #info [colCount]="2" itemType="group" caption="Description"  >
            <dxi-item itemType="group">
                <dxi-item>
                    <div class="dx-field">
                        <div class="dx-field-label">Name</div>
                        <div class="dx-field-value">
                            <dx-text-box value="Test name" [showClearButton]="true" [disabled]=true></dx-text-box>
                        </div>
                    </div>
                </dxi-item>

Can anyone please help with this.