Why doesn't the select event fire?

Question

JavaScript

I tried to specify all the events that are, none of them work

. This is the component itself.

export class Selector extends BaseComponent {
  private states: any;
  constructor() {
    super('select', ['select']);
    console.log(this.element);
    this.element.addEventListener('click', () => {
      console.log('TEST');
    });
    this.states = States.getInstance();
  }

  render(value: number, text: string) {
    const option = document.createElement('option');
    option.value = `${value}`;
    option.innerHTML = `${text}`;
    this.element.appendChild(option);
  }
}

Here I render on the page

export class SettingsScreen extends BaseComponent {
  private states: States;
  constructor() {
    super('div', ['settings']);
    this.states = States.getInstance();
    const gameCardsTitle = new Heading('Game cards');
    const difficultTitle = new Heading('Difficulty');
    const selectCards = new Selector();
    selectCards.render(0, 'Marvel');
    selectCards.render(1, 'Animal');
    const selectDifficult = new Selector();
    selectDifficult.render(0, 'easy');
    selectDifficult.render(1, 'normal');
    selectDifficult.render(2, 'hard');
    this.element.append(
      gameCardsTitle.element,
      selectCards.element,
      difficultTitle.element,
      selectDifficult.element
    );
  }
}