How to create a dynamic chain select with strings using Select2

I am creating a DnD style calculator. There are class trees that are 3 classes deep. How would I be able to force Select 2 to only show level 1, level 2 and level 3 in their respective selects and also base it on the prior selection? I have seen this work with numbers before but I cannot get it to work with specific strings. I created a JSFiddle here: https://jsfiddle.net/3gma61wf/45/

The way the class array is set up:

const classes1 = [
    {
        id: '',
        text: 'Select ICQ...',
    },
    {
        id: 'fighter',
        text: 'Fighter',
        children: [
            {
                id: 'barbarian',
                text: 'Barbarian',
                children: [
                    { id: 'beserker', text: 'Beserker' }
                ],
                id: 'soldier',
                text: 'Soldier',
                children: [
                    { id: 'knight', text: 'Knight' }
                ]
            }
        ]
    },
    {
        id: 'archer',
        text: 'Archer',
        children: [
            {
                id: 'ranger',
                text: 'Ranger',
                children: [
                    { id: 'elite-ranger', text: 'Elite Ranger' }
                ],
                id: 'paladin',
                text: 'Paladin',
                children: [
                    { id: 'bard', text: 'Bard' }
                ]
            }
        ]
    },
    {
        id: 'mage',
        text: 'Mage',
        children: [
            {
                id: 'wizard',
                text: 'Wizard',
                children: [
                    { id: 'warlock', text: 'Warlock' }
                ],
                id: 'druid',
                text: 'Druid',
                children: [
                    { id: 'artificer', text: 'Artificer' }
                ]
            }
        ]
    },
];

On my local project I can get Class 1 to fill in. I want to be able to use Class 1 to find the “children” key and display all of the “text” values there. So on until the third level. I have tried also splitting the array into 3 parts, each for a different select field and then having a “parent” key that would match the prior wording in the array but for obvious reasons that would be more difficult to maintain. Basically, is there a way I can force Select2 to dynamically understand the way I’ve built the array and automatically update it?

I have all commented out code in the JSFiddle that I have attempted. I was able to get Class2 using the find() function but that only ever returns the first found value and when I attempted to switch it to use filter() it would always come back as undefined.