Updating a form’s select element’s selectedIndex property, updates the value, but doesn’t change the selected option in the page

Here is the code:

const formClubSelect: HTMLSelectElement | null = document.getElementsByTagName('select',)[1] as HTMLSelectElement;
if (formClubSelect) {
    for (var i = 0; i < formClubSelect.options.length; i++) {
        const option = formClubSelect.options[i];

        if (option.value === clubId && option.text === clubName) {
            formClubSelect.selectedIndex = option.index;
            formClubSelect.options[option.index].selected = true;
        }
    }
}

The option’s can sometimes have the same value, so I’m looping through them and checking the value/text based on some previous values. If the values match the option ones, I try to set the index on the select element, as well as set the selected property on the option to true. I’ve tried setting just the option selected property, but it doesn’t seem to change anything.

I’ve also checked the index before and after the change and it does update, but the option doesn’t appear on the select: