JSON schema - display values on drop down based on another drop down

Question

I've defined JSON Schema and I'm using JSON Editor to render a form having two drop-down list (Brands and Devices) and the expected form looks like this:

Brands drop down list consists of 3 values:

• Apple
• Google
• Dell

Similarly, Devices drop down list also consists of 3 values:

• Laptop
• Tablet
• Phone

However, there is a condition to render the values on Devices drop down list and the conditions are as follows:

1. If Device is Dell then just show Laptop and Tablet as devices
2. Else show all of the available devices

I've used If then and else of JSON schema draft 7 to achieve the expected result and my solution so far is shown below (Here's a link to interactive JSON Schema playground):

{
  "required": [
    "brands",
    "devices"
  ],
 "properties": {
  "brands": {
   "$ref": "#/definitions/brands"
  }
 },
 "definitions":{
   "brands": {
     "title": "Brands",
     "type": "string",
     "enum": [
       "Apple",
       "Google",
       "Dell"
      ],
     "default": "Apple"
   },
  "all_devices": {
     "type": "string",
     "enum": [
       "Laptop",
       "Tablet",
       "Phone"
      ]
   },
   "dell_devices": {
     "type": "string",
     "enum": [
       "Laptop",
       "Tablet"
      ]
    }
 },
 "if": {
  "properties": {
   "brands": {
     "const" : "Dell"
   },
   "required": [
      "devices"
    ]
  },
  "then": {
   "properties": {
    "devices": {
      "$ref": "#/definitions/dell_devices"
     }
   },
   "required": [
      "devices"
    ]
  },
  "else":{
   "properties": {
    "devices": {
      "$ref": "#/definitions/all_devices"
     }
   },
   "required": [
      "devices"
    ]
  }
 }
}

However, the second drop down (Devices) is not not displaying at all and I'm not sure how I can debug the issue as I'm new to JSON schema.

I would really apprecriate if anyone could guide me to the right direction or maybe suggest any other approaches to achieve the result that I desired.

Thanks a lot!