VSC Snippet Creation - Advanced

Question

I am attempting to create an advanced snippet where the options change depending on what is selected.

Here is a basic example of my starting snippet(without advanced options)

    "Button General - for all buttons": {
        "scope": "typescriptreact",
        "prefix": ["yx_Button"],
        "body": [
            "// * All button props are optional (ex if you dont want an icon, dont include the prop)",
            " <$0YDSButton onClick={${1:function}} icon={${2|'NONE','ADD', 'BOOK'|}}/>"
        ],
        "description": "example description"
    },

Now from this I would like to add the following capabilities but have been unable (I will show an example of what ive tried at the end)

1. instead of onClick={${1:function}} I would like to have two options where it is either onClick={} or type={}...such as ${1|onClick, type|}
2. depending on what is selected (onClick or type) then I want another set of options to show up within the braces{}...for example:

• if onClick is selected: then id like to have a tab stop with two options:

onClick={${2|functionName, ()=>console.log('clicked') |}}

• if type is selected then id like to have a tab stop with three options:

type={"${2|submit, button, reset |}"}

I have tried A LOT of combinations using vscode docs and other stackoverflow examples and AI with no luck so far with over 200 combinations. Here is one example that got me a little closer but still is not working as expected at all.

   "Button General - for all buttons": {
        "scope": "typescriptreact",
        "prefix": ["yx_Button"],
        "body": [
            "// * All button props are optional (ex if you dont want an icon, dont include the prop)",
            "<$0YDSButton ${3|onClick, type, ''|} ${3/^(onClick|type)$/: {${3:()=>${2}}, type: '${2:'submit' | 'button' | 'reset'}'}:/} ${3: } ${4: secondary | '' }/>"
        ],
        "description": "example description",
        "choices": {
            "onClick": [
                {
                    "tab": "2",
                    "snippet": "onClick={()=>${2}}"
                }
            ],
            "type": [
                {
                    "tab": "2",
                    "snippet": "type='${2|submit, button, reset|}'"
                }
            ]
        }
    },

Does anyone know how I can achieve this or have any notes/tips that may help solve this?

I wish vscode docs had better/more advanced choices examples but I cant find anything to help me solve this.
I've been working on this for a while so thank you in advance for any help, tips or ideas!