how can i add a default select option from a mapped API call

Hey guys im grabbing data from a car query API, i am then listing the latest 40 years as buttons but adding the remaining years as a select option, however i on the select i want to add a default unselectable option for "–select a year–"

here is the code:

<select className="appearance-none text-center p-4 w-full text-md font-semibold leading-none bg-dark-purple text-white border-light-purple rounded outline-none" name="field-name" placeholder="Select another year" id="selectYears" option>
  {remainingYears.map((data, index) => { if (latestYear - data.year > 29) { return (
  <option key={data.year} value={data.year}>
    {data.year}
  </option>
  ); } })}
</select>

>Solution :

Just include the default options outside of the .map() using this pattern:

<select>
  <option selected disabled>Default</option>
  {[].map(data => <option>Real options</option>)}
</select>