Select2 sur un select inséré en Javascript

Bonsoir à tous!

Je veux avoir select2 sur un select que je crée de façon dynamique. Quand je tente le coup, le select n'apparait pas sur la page mais il est bien présent lorsque j'inspecte le code.

Voici mon code:

#addInputTd(){
        const td = createElement('td')
        const select = createElement('select', {class: 'form-control form-control-sm'})
        const option = createElement('option', {value: ''})
        option.innerText = 'Sélectionnez un intrant'
        select.append(option)

        for (const input of this.#allIntrants) {
            const option = createElement('option', {value: input.id})
            option.innerText = input.designation

            // On sélectionne l'option si l'id de l'intrant correspond à l'intrant de la ligne (le EstimateInput)
            if(input.id === this.#intrant.id){
                option.setAttribute('selected', 'selected')
            }
            select.append(option)
        }

        $(select).select2();

        td.append(select)
        this.#tr.append(td)
    }

addIntrantsTd() est une méthode d'une classe

Ce que j'obtiens
Lorsque mon code s'exécute, voici ce que j'obtiens :

<select class="form-control form-control-sm select2-hidden-accessible" data-select2-id="select2-data-my-select" tabindex="-1" aria-hidden="true">
        ...
        <option value="...">...</option>
</select>

Je ne sais pas pourquoi le select ne s'affiche pas dans le navigateur.

Merci d'avance à tous