Key to enum mapping

Question

I'm working on an Obsidian plugin where I have created an enum to represent the setting for the background pattern.

In the settings menu of the plugin, I'm showing a drop down menu, and added all the enum values to it.

When the user changes the state of the drop down menu, I want to set the value they select in my settings object, but I can't get an enum value from the key or value of the enum.

This is my code for creating the setting in Obsidian:

new Setting(backgroundContainer)
            .setName('Pattern')
            .setDesc('Choose a pattern to use for the background.')
            .addDropdown(dropdown => {

                for(const key in BackgroundPattern) {
    
                    if (Number(key) >= 0) {
    
                        dropdown.addOption(key, BackgroundPattern[key]);
                    }
                }
                dropdown.onChange(async (value) =>{
                    const key = Number(value)
                    let pattern = BackgroundPattern[value as keyof typeof BackgroundPattern];
                    this.plugin.settings.background.pattern = pattern;
                })
            })

I am using the setting when drawing the background:

round(): void {
    const stageWidth = this.stage.width();
    const stageHeight = this.stage.height();

    this.backgroundLayer.destroyChildren();

    console.log(this.settings.background.pattern)
    console.log(typeof this.settings.background.pattern)

    switch (this.settings.background.pattern) {
        case BackgroundPattern.grid:
            //draw vertical lines
            for (let x = 0; x < stageWidth; x += this.settings.background.size) {
                this.backgroundLayer.add(new Line({
                    stroke: this.settings.background.color,
                    points: [x, 0, x, stageHeight],
                    name: 'vertical'
                }))
            }
        //no break to run next case and draw lines of grid
        case BackgroundPattern.line:
            //draw horizontal lines
            for (let y = 0; y < stageHeight; y += this.settings.background.size) {
                this.backgroundLayer.add(new Line({
                    stroke: this.settings.background.color,
                    points: [0, y, stageWidth, y],
                    name: 'horizontal'
                }))
            }
            break;
    }
}

When the drawBackground method is called, I get grid and string in the console, but no background is drawn, so the switch case statement fails when comparing the setting to BackgroundPattern.

To better understand this behavior, I created this snippet to isolate the conversion:

enum BackgroundPattern {
    blank,
    line,
    grid
}

for (const key in BackgroundPattern) {
    if (Number(key) >= 0) {
        console.log(key, BackgroundPattern[key])
    }
}

const key = String(0) //or 1 or 2

//first try
let reversed = BackgroundPattern[key as keyof typeof BackgroundPattern];
console.log(reversed)
console.log(typeof reversed)

//second try
//taken from https://stackoverflow.com/a/54297863/11908728
let reversed2 = Object.values(BackgroundPattern).find((val) => {
    return val === BackgroundPattern[Number(key)]
});
console.log(reversed2)
console.log(typeof reversed2)

console.log('check comparison:')
if(reversed2 == BackgroundPattern.blank) {
    console.log('blank')
}
if(reversed2 == BackgroundPattern.grid) {
    console.log('grid')
}
if(reversed2 == BackgroundPattern.line) {
    console.log('line')
}

Playground Link Independent of what I'm setting key to, none of the three comparison at the end work.

What should I do, to get a value for my setting, that I can later compare it to with the BackgroundPattern enum to decide which background to draw?