title: Next.js: Links inside dropdown menu not working
body: <p>I'm trying to enable language selection in Next.js via a dropdown menu. If the links aren't nested inside the <code>select</code> tag, they're working fine. As soon as they are though, they're not responding anymore. I'm assuming this is because of a missing event handler and I think that the solution could be rather simple, but I just can't get it to work. </p>
  <p>Would be great if someone could have a look at this. Also I'm not looking for a solution to just switch between two languages via a ternary operator, as I'd like to use the logic for future projects with more than two languages. It is also important for me to stick to the <code>select</code> tag, as this makes the most sense for a selection of languages and provides better accessibility.</p>
  <p>This is working ✅</p>
  <pre class="lang-js prettyprint-override"><code>{router.locales.map((language) =&gt; (
    &lt;Link
      href={router.asPath}
      locale={language}
      scroll={false}
      key={language}
    &gt;
    &lt;button type='button'&gt;
      {language === 'en' ? 'EN' : language === 'de' ? 'DE' : null}
    &lt;/button&gt;
    &lt;/Link&gt;
  ))}
  </code></pre>
  <p>This is not working ❌</p>
  <pre class="lang-js prettyprint-override"><code>&lt;select name='languages' id='language-select'&gt;
    {router.locales.map((language) =&gt; (
      &lt;Link
        href={router.asPath}
        locale={language}
        scroll={false}
        key={language}
      &gt;
        &lt;option value={language}&gt;
          {language === 'en'
            ? 'EN'
            : language === 'de'
            ? 'DE'
            : null}
        &lt;/option&gt;
      &lt;/Link&gt;
    ))}
  &lt;/select&gt;
  </code></pre>
  <p>Thank you very much in advance for taking the time to read this and trying to help me, I really appreciate it! </p>