Option selector not showing data fetched from AJAX call

Question

I was trying to fetch some data from an API and to create a selector in my HTML file to render each of the data piece contained in the retrieved information, however it looks as if the text is not showing up in the frontend, it does however, create each single per piece of data, see below:

$.ajax({
  url: "../project1/php/countries.php",
  type: "GET",
  dataType: "json",
  success: function (res) {
    if (res) {
      let result = res.map((country) => {
        return country.name;
      });

      console.log(JSON.stringify(result));

      for (let country in result) {
        let option = $("<option></option>", country);
        $(".country").append(option);
        /// It  creates the box but not the text, if i use the text() method it does not add the country name
      }
    }
  },
  error: function (jqXHR, textStatus, errorThrown) {
    console.log(JSON.stringify(errorThrown));
  },
});