In my Next.js application, I am using the Cytoscape Context Menus library to create a submenu that is dynamically updated to include specific options depending on what kind of node has been selected. The values for the submenu items are already being passed into the overarching menu via an evt object. I have tried using submenu.push(); however, I am running into the following error:

Syntax error: Unexpected token, expected ","

Before putting together functionality within the push() method to dynamically grab items from evt to create objects out of them, I tried running the push() method on pre-defined objects to test whether this concept would work in general; however, it did not for me. I'd really appreciate it if someone could point out what I may have been doing wrong and explain how I can dynamically add items in a submenu — if it's possible. I've included my code below:

const options = {
    evtType: 'cxttap',
    menuItems: [
        {
            id: 'one',
            content: 'This is the first option in the menu',
            selector: 'node',
            onClickFunction(evt) {
                genericFunctionName(evt, 'one')
            },
        },
        {
            id: 'two',
            content: 'This is the second option in the menu',
            selector: 'node',
            onClickFunction(evt) {
                genericFunctionName(evt, 'two')
            },
        },
        {
            id: 'three',
            content: 'This is the third option in the menu',
            selector: 'node',
            onClickFunction(evt) {
                console.log(evt.target.data('properties'));
            },
            submenu: [
                {
                    id: 'submenuOne',
                    content: 'This is the first option in the submenu',
                    tooltipText: 'blue',
                    onClickFunction: function () {
                        console.log("The first option in the submenu was clicked on")
                    },
                },
                {
                    id: 'submenuTwo',
                    content: 'This is the second option in the submenu',
                    tooltipText: 'blue',
                    onClickFunction: function () {
                        console.log("The second option in the submenu was clicked on")
                    },
                },
            ],
            submenu.push(
                {
                    id: 'submenuThree',
                    content: 'This should be the third option in the submenu',
                    tooltipText: 'blue',
                    onClickFunction: function () {
                        console.log("The third option in the submenu was clicked on")
                    },
                },
            ),
        },
    ],
};

FWIW, I am using Cytoscape Context Menus v4.1.0.