How do I show/render a custom field on Azure Work Item Form using Azure Extension.

Question

How do I show/render a custom field(e.g Text) on Azure Work Item Form using Azure Extension.

Referring to Microsoft official documentation, here are few things I have tried.

1.My Azure extension project folder structure looks like below:

|-- my-hub.html
|-- node_modules
    |-- @types
    |-- azure-devops-extension-sdk
|-- package.json
|-- vss-extension.json

2.Below is the "vss-extension.json" file containing necessary changes for showing up tab, group and fields on azure work item.
I.
{
  "manifestVersion": 1,
  "id": "my-practice-extension",
  "publisher": "AnirudhaYeola",
  "version": "1.0.2",
  "name": "My Practice Extension",
  "description": "A sample Visual Studio Services extension",
  "public": false,
  "categories": [ "Azure Repos" ],
  "targets": [
    {
      "id": "Microsoft.VisualStudio.Services"
    }
  ],
  "scopes": [
    "vso.work",
    "vso.work_write"
  ],
  "files": [
    {
      "path": "MyPage.html",
      "addressable": true
    }
  ],
  "contributions": [          
    {
      "id": "sample-work-item-form-page",
      "type": "ms.vss-work-web.work-item-form-page",
      "description": "Custom work item form page",
      "targets": [
        "ms.vss-work-web.work-item-form"
      ],
      "properties": {
        "name": "My Tab",
        "uri": "MyPage.html"
      }
    },
    {
      "id": "sample-work-item-form-group",
      "type": "ms.vss-work-web.work-item-form-group",
      "description": "Custom work item form group",
      "targets": [
        "ms.vss-work-web.work-item-form"
      ],
      "properties": {
        "name": "My Group",
        "uri": "MyPage.html",
        "height": 600
      }
    },
   {
  "id": "sample-field",
  "type": "ms.vss-work-web.work-item-form",
  "description": "Custom work item form page field",
  "targets": [        
    "ms.vss-work-web.work-item-form"
  ],
  "properties": {
    "fields": [
      {
        "fieldName": "MyTestField",
        "fieldType": "string",
        "defaultValue": "",
        "watermark": "Enter Value",
        "readOnly": false,
        "required": false,
        "label": {
          "locale": "en-US",
          "value": "Your New Field"
        }
      }
    ],
    "name": "Anirudha",
    "uri": "MyPage.html"
    }
  }
 ]
}

II.
{
  "manifestVersion": 1,
  "id": "my-sampledemo-extension",
  "publisher": "AnirudhaYeola",
  "version": "2.0.6",
  "name": "My First Extension",
  "description": "A sample Visual Studio Services extension",
  "icons": {
    "16": "icons/Testing.png"
  },
  "public": false,
  "categories": [ "Azure Repos" ],
  "targets": [
    {
      "id": "Microsoft.VisualStudio.Services"
    }
  ],
  "contributions": [
    {
      "id": "my-hub",
      "type": "ms.vss-work-web.work-item-form-page",
      "description": "Custom work item form page",
      "targets": [
        "ms.vss-code-web.code-hub-group",
        "ms.vss-work-web.work-item-form"
      ],
      "properties": {
        "name": "Anirudha",
        "uri": "MyPage.html"
      }
    },

    {
      "id": "sample-field",
      "type": "ms.vss-work-web.work-item-form",
      "description": "Custom work item form page field",
      "targets": [        
        "ms.vss-work-web.work-item-form"
      ],
      "properties": {
        "fields": [
          {
            "fieldName": "MyTestField",
            "fieldType": "string",
            "defaultValue": "",
            "watermark": "Enter Value",
            "readOnly": false,
            "required": false,
            "label": {
              "locale": "en-US",
              "value": "Your New Field"
            }
          }
        ],
        "name": "Anirudha",
        "uri": "MyPage.html"
      }
    },

    {
      "id": "sample-group",
      "type": "ms.vss-work-web.work-item-form-group",
      "description": "Custom work item form group",
      "targets": [
        "ms.vss-work-web.work-item-form"
      ],
      "properties": {
        "name": "Anirudha's Group",
        "uri": "MyPage.html"
      },
      "actions": [
        {
          "id": "field1",
          "type": "ms.vss-work-web.work-item-form-page-field",
          "properties": {
            "label": "Field 1",
            "fieldName": "System.CustomField1",
            "defaultValue": "Dummy Value 1",
            "order": 1
          }
        },
        {
          "id": "field2",
          "type": "ms.vss-work-web.work-item-form-page-field",
          "properties": {
            "label": "Field 2",
            "fieldName": "System.CustomField2",
            "defaultValue": "Dummy Value 2",
            "order": 2
          }
        }
      ]
    },

    {
      "id": "sample-control",
      "type": "ms.vss-work-web.work-item-form-control",
      "description": "Custom work item form control",
      "targets": [
        "ms.vss-work-web.work-item-form"
      ],
      "properties": {
        "name": "Anirudha's Control",
        "uri": "MyPage.html"
      }
    }
  ],
  "inputs": [
    {
      "id": "FieldName",
      "description": "The field associated with the control.",
      "type": "WorkItemField",
      "properties": {
        "workItemFieldTypes": [ "String" ]
      },
      "validation": {
        "dataType": "String",
        "isRequired": true
      }
    },
    {
      "id": "Colors",
      "description": "The colors that match the values in the control.",
      "validation": {
        "dataType": "String",
        "isRequired": false
      }
    }
  ],
  "files": [
    {
      "path": "MyPage.html",
      "addressable": true
    },
    {
      "path": "node_modules/azure-devops-extension-sdk",
      "addressable": true,
      "packagePath": "lib"
    }
  ]
}

Note: - Both I and II are different approaches tried by me for achieving same purpose. But None worked.

3.Below are the problems I am facing: -
- When I install the extension, I am able to see Page (Tab) and Group on Azure work Item. Whereas I can't see any field on work item. Instead, I get an error on azure group and tab saying "my-practice-extension Extension by Anirudha Yeola Failed to load".
In Browser Console window I am getting errors in following sequence: - (Please refer to the screenshot)
- Failed to load resource: the server responded with a status of 404 ()
- POST https://dev.azure.com/zaahme/_apis/WebPlatformAuth/SessionToken 500 (Internal Server Error)
- Error: Cannot get registered instance for: AnirudhaYeola.mydemoextension.sample-group
- TFS.WebApi.Exception: InvalidUserId                        

4.Did anybody face the same problem or similar kind of behavior? I would appreciate for the help dear community.