I have this code that defines structure of my navbar

const tabsStructure = [
    {name: "File",
        menu: [
            {
                name: "New",
                onClick: () => {/*Toggle component*/}
            },
            {name: "Save",
                menu: [
                    {
                        name: "Save to browser",
                        onClick: () => {/*Toggle component*/}
                    },
                    {
                        name: "Save JSON",
                        onClick: () => {/*Toggle component*/}
                    }
                ],
            },
            {
                name: "Load",
                onClick: () => {/*Toggle component*/}
            }
        ]
    },
    
    {name: "Edit",
        menu: [
            {
                name: "Resize",
                onClick: () => {/*Toggle component*/}
            }
        ]
    }
];

export default tabsStructure;

That array of objects is being imported to one of the React components which properly generates HTML structure. I would want to add some functions for toggling other components, to some of the menu items (as you can see in my code). I would do that through setting proper states of common parent of both, the menu item and the component I want to toggle. However, from the scope of this file I don't have access to other components, their states etc. My question is: what is the best way of dealing with it? Should I move tabsStructure to the state of App component? If so, would it be possible to still keep it in separate file?

Here's structure that my code generates: structure

For example, I would like to toggle DocumentCreator through clicking on "New" menu item.