I´m trying to create and call a function that builds a <select> item and returns this item to be rendered on the screen.

However, it renders the text "[object HTMLSelectElement]" on the screen instead of the <select> element that I want. In the Chrome console, though, it renders the <select> element perfectly.

function renderSelect(selectOptions) {
  var select = document.createElement("select");

  for (let index = 0; index < selectOptions.length; index++) {
    const element = selectOptions[index];

    select.insertAdjacentHTML(
      "beforeend",
      `<option value="${element}">${element}</option>`
    );
  }

  // This shows the <select> element perfectly in the console
  console.log(select)

  return select;
}

////////// BELOW IS THE FUNCTION CALL IN ANOTHER (WHICHEVER) PART OF THE CODE

// This renders "[object HTMLSelectElement]" on the screen instead of the <select> element
`${renderSelect(selectOptions)}`;