Issue in fetching Dynamic Media Assets in Edge Delivery Services(Universal Editor)

I am trying to implement Dynamic media assets following this link -Universal Editor Custom Asset Picker

I have enabled the custom asset picker extension.

Added component definition. model & filter

{
"definitions": [
{
"title": "Dynamic Media Asset",
"id": "dm-asset",
"plugins": {
"xwalk": {
"page": {
"resourceType": "core/franklin/components/block/v1/block",
"template": {
"name": "Dynamic Media Asset",
"model": "dm-asset"
}
}
}
}
}
],
"models": [
{
"id": "dm-asset",
"fields": [
{
"component": "text",
"name": "dm_alttext",
"label": "Alt Text",
"valueType": "string"
},
{
"component": "custom-asset-namespace:custom-asset-mimetype",
"valueType": "string"
},
{
"component": "custom-asset-namespace:custom-asset",
"name": "dm-image",
"label": "Image",
"configUrl": "https://main--test-xwalk--jam.aem.page/tools/assets-selector/image.config.json",
"valueType": "string"
}
]
}
],
"filters": []
}

Added image.config.json file under tools-> assets -selector

{
"repoNames": [
"author-p7452-e733061.adobeaemcloud.com",
"delivery-p130360-e1272151.adobeaemcloud.com",
],
"aemTierType": [
"delivery",
"author"
],
"expiryOptions": {
"allowSelectionAndDrag": false,
},
"filterSchema": [
{
"fields": [
{
"defaultValue": ["image/*"],
"element": "checkbox",
"name": "type",
"options": [
{
"label": "Image",
"readOnly": true,
"value": "image/*"
}
]
}
],
"groupKey": "FileTypeGroup",
"header": "File Type"
},
{
"fields": [
{
"columns": 3,
"defaultValue": ["arena"],
"element": "taggroup",
"name": "property=xcm:keywords.id=",
"options": [
{
"label": "Demo",
"value": "demo"
}
]
}
],
"groupKey": "AssetTagsGroup",
"header": "Assets Tags"
}
],
}

when I try to author dynamic media block , I am getting image link as output instead of the image.
Output:

However I expect the image as a output which will get adjusted based on the column size

Questions:

1. Am I missing any configuration?
2. What should be added in image.config.json reponames for delivery?