How to Use Data Detail Component

Hi.
I have a textbox which loads a server connect (list) on “input” event, and populates a select html component.
Another server connect (details) is set to auto-load and fetch details of 1 item selected in select list.
Everything is working well up to here.
Next, I need to display response of details server connect. For this, I added a data details component, but can’t get it to work.
Below is the code for the same. Please help. Should I use another component?

<input id="textSender" name="textSender" type="text" class="form-control" placeholder="Enter Starting Name Characters" dmx-on:input="serverconnectSenderList.load({sendername: value})">
                  <select id="selectSender" class="form-control" dmx-bind:options="serverconnectSenderList.data.query1" optiontext="senderName" optionvalue="senderID" dmx-on:updated="modal1.data_detail1.select(value)">
                  </select>
                  <dmx-data-detail id="data_detail1" dmx-bind:data="serverconnectSenderDetails.data.queryDetails" key="senderID">
<p>{{senderAdd1}}</p>
                  </dmx-data-detail>

PS: I used this link to understand how Data Details works. https://www.dmxzone.com/go/32764/dmxzone-app-connect-manual/32781/dmxzone-app-connect-data-traversal-data-detail-component