DevExtreme angular - custom dx-select-box

I am displaying 3 values ​​in a list, but I don't know how to add a header to it.

Here's a fragment of my code:

<dxi-item>
    <div class="dx-fieldset">
        <div class="dx-field-label">
            <label class="form-label" i18n>Location</label>
        </div>
        <div class="dx-field-value">
            <dx-select-box placeholder="Select..." i18n-placeholder [dataSource]="locations"
                [(value)]="item.userLocationId" [stylingMode]="'filled'" [showClearButton]="true" [searchEnabled]="true"
                valueExpr="id" displayExpr="name" [readOnly]="!isEditing" (valueChange)="onLocationChange()"
                itemTemplate="listItem" [dropDownOptions]="{width: 'auto'}">
                <div *dxTemplate="let data of 'listItem'">
                    <div class="custom-item">
                        <div class="custom-column">{{ data.id }}</div>
                        <div class="custom-column">{{ data.name }}</div>
                        <div class="custom-column">{{ data.company }}</div>
                    </div>
                </div>
                <dx-validator>
                    <dxi-validation-rule type="required" i18n-message message="Location is required">
                    </dxi-validation-rule>
                </dx-validator>
            </dx-select-box>
        </div>
    </div>
</dxi-item>

I tried adding this to a list but then each item has a header and I tried to validate that only the first item in the list would have a header but it doesn't work properly.