Grok Debugger showing incorrect data in the output for subfields

[nicpenning]

Kibana version:
7.8.1
Elasticsearch version:
7.8.1
Server OS version:
Windows Server 2016
Browser version:
Chrome
Browser OS version:
84.0.4147.125
Original install method (e.g. download page, yum, from source, etc.):
Download Page
Describe the bug:
Grok editor is showing literal "[","]" (brackets) when using a regular expression instead of the json object.

What is displayed:
{
"[custom][args_encoded]": "aksjdfhaksjdfh89vcxb89dkigkkfgs8kaksjdfhaksjdfh89vcxb89dkigkkfgs8kaksjdfhaksjdfh89vcxb"
}

What is in Kibana(raw json):
"custom": {
"args_encoded": "aksjdfhaksjdfh89vcxb89dkigkkfgs8kaksjdfhaksjdfh89vcxb89dkigkkfgs8kaksjdfhaksjdfh89vcxb"
}

This is confusing because when using dot notation in the grok debugger I had it backwards leading me to believe it was working:

Steps to reproduce:

1. Open Grok Debugger
   2.Use example patterns:
   (?<custom.args_encoded>[A-Za-z0-9+/\n]{50,}[=]{0,2}|[A-Za-z0-9+/]{50,}[=]{0,2}) or (?<[custom][args_encoded]>[A-Za-z0-9+/\n]{50,}[=]{0,2}|[A-Za-z0-9+/]{50,}[=]{0,2})
   Use example data:
   aksjdfhaksjdfh89vcxb89dkigkkfgs8kaksjdfhaksjdfh89vcxb89dkigkkfgs8kaksjdfhaksjdfh89vcxb
   3.Run and notice the in correct display

Expected behavior:
I expect the output to match what I would see in the Elastic Search database or Kibana.

Any additional context:
Current workaround is using LogStash pipelines on all instances of Grok to rename fields that were created using the notation by using the mutate rename filter.

[elasticmachine]

Pinging @elastic/es-ui (Team:Elasticsearch UI)