Why is class in my render function being inherited?

I’m facing a really strange issue that I can’t figure out.

I’ve made a render function for making a sidebar based on an array, the array might look like:

[
    {
        "text": "Home",
        "link": "/",
        "children": []
    },
    {
        "text": "About",
        "link": "/about",
        "children": []
    },
    {
        "text": "Category",
        "link": "/categories",
        "children": [
            {
                "text": "Sub Category",
                "link": "/categories/demo",
                "children": []
            },
            {
                "text": "Other",
                "link": "/categories/other",
                "children": [
                    {
                        "text": "Other Category",
                        "link": "/categories/other/othersub",
                        "children": []
                    }
                ]
            },
            {
                "text": "Sub Category 2",
                "link": "/categories/sub2",
                "children": []
            }
        ]
    }
]

My render function is then using a depth first search to build up an unordered list, to act as the sidebar. If there is children, then we do another unordered list and so on.

export default {
        functional: true,
        render(createElement, context) {

            let searchBar = createElement('div', {
                'class': ['search-box-container']
            }, [
                createElement('b-input', {
                    props: {
                        placeholder: 'Search'
                    }
                })
            ]);

            //Currently, we have no nav items, so we need to kick it off.
            //The reference to this object is in the `navbar.children` variable
            //Thus allowing us to build its children.
            let nav = createElement('ul', { 
                    'class': [ 'nav', 'flex-column', 'left-navbar' ]
                }, []
            );

            let navbar = createElement('nav', { 'class': [ 'col-md-2', 'd-none', 'd-md-block', 'bg-light', 'sidebar' ] }, [ searchBar, nav ]);
            
            //Depth First Search.
            let stack = [ ...Vue.prototype.NAV_ITEMS, null ];

            while(stack.length > 0) {
                let currentNode = stack.shift();

                if (currentNode == null) {
                    nav = nav.parent;
                    continue;
                }
                    
                let selectedItem = createElement('li', { 'class': ['nav-item'] }, [ 
                    createElement('router-link', { 'class': ['nav-link'], props: { to: currentNode.link }, } , [ currentNode.text ]) 
                ]);

                selectedItem.parent = nav;
                nav.children.push(selectedItem);

                //We use a single null to let us know when we need to reduce depth
                if (currentNode.children && currentNode.children.length > 0) {
                    stack  = [...currentNode.children, null, ...stack];
                    nav = createElement('ul', { 'class': [ 'nav', 'flex-column', 'ml-3' ] }, []);  
                    nav.parent = selectedItem;
                    selectedItem.children.push(nav);
                }
            }

            return navbar;
        }
    }

The code works, but it seems the classes are being inherited, as shown here: https://i.imgur.com/8tHI0Ny.png

We can see that every single item contains the class nav flex-column left-navbar

I have no idea why this is happening - the DOM is structured perfectly as I can see using devtools, but the classes are causing a huge issue.

Can anyone shed some light?

Thanks

Anyone have any idea?