Dynamically poplulated selection field breaks after dialog conversion from coral ui 2 to coral ui 3

I have a multifield component in Coral ui2 and I want to migrated it to Coral ui3.

Post migration the when the I dynamically populated the fields for the dropdown:

var item = {
value : field.value,
content : {
textContent: field.label
}
};
$(this).get(0).items.add(item);

I get the dropdown list prepopulated correctly. But the value that was saved does not gets displayed on the reload of the dialog. The dialog always shows the first value which was created dynamically.

I see the value is coming from the back-end via the http://localhost:4502/content/we-retail/language-masters/en/men/_jcr_content/root/responsivegrid/testcomponent_ui.infinity.json?_=1595924846406

{"jcr:primaryType":"nt:unstructured","jcr:createdBy":"admin","jcr:lastModifiedBy":"admin","jcr:created":"Mon Jul 27 2020 22:52:08 GMT+0530","jcr:lastModified":"Tue Jul 28 2020 00:58:58 GMT+0530","sling:resourceType":"weretail/components/content/testcomponent-ui","rule":{"jcr:primaryType":"nt:unstructured","item0":{"jcr:primaryType":"nt:unstructured","country":"us"}}}