How to set default view of selected based on language detection

Question

So i've made the translations work perfectly, but I'm having a small issue where lets say I change the language from English to danish and reload page and scroll down to my footer where the language selector is located, it shows the default language as English but the actual translation is danish.

The current code for the language selector is as follows:

<div className="relative">
                  <select
                    id="language"
                    name="language"
                    className="appearance-none block w-full bg-none bg-gray-700 border border-transparent rounded-md py-2 pl-3 pr-10 text-base text-white focus:outline-none focus:ring-white focus:border-white sm:text-sm"
                    defaultValue="English"
                  >
                    <option onClick={() => handleClick("en")}>English</option>
                    <option onClick={() => handleClick("da")}>Danish</option>
                  </select>
                  <div className="pointer-events-none absolute inset-y-0 right-0 px-2 flex items-center">
                    <ChevronDownIcon
                      className="h-4 w-4 text-white"
                      aria-hidden="true"
                    />
                  </div>
                </div>

How can I change this, so if I visit the site and let's say the default of my language is danish, the selected value in the drop-down is also danish and not English?.

This issue is sort of hard for me to explain, so if you have further questions please feel free to do so.