I am using UseTranslation on my react app, I have swedish and english. Default is swedish. When i change to english the language is being changes as it should but if I reaload the page the language is back to swedish. Is it possible to keep the language if it has been changed when realoading the page?

My ChangeLanguage component:

`import { useState } from 'react'
import { NavDropdown } from 'react-bootstrap'

import { useTranslation } from 'react-i18next'

function LanguageSelector (): JSX.Element {
const { i18n } = useTranslation()

const languageOptions = [
{
code: 'se',
label: 'Svenska',
flag: '????????',
svg: <svg style={{ width: '20px', height: '20px' }} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 10">
<rect width="16" height="10" fill="#006aa7"/>
<rect width="2" height="10" x="5" fill="#fecc00"/>
<rect width="16" height="2" y="4" fill="#fecc00"/>
</svg>
},
{
code: 'en',
label: 'English',
flag: '????????',
svg: <svg style={{ width: '20px', height: '20px' }} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30">
<clipPath id="a"><path d="M0 0v30h60V0z" /></clipPath>
<clipPath id="b"><path d="M30 15h30v15zv15H0zH0V0zV0h30z" />
</clipPath><g clipPath="url(#a)"><path d="M0 0v30h60V0z" fill="#012169" />
<path d="M0 0l60 30m0-30L0 30" stroke="#fff" strokeWidth="6" />
<path d="M0 0l60 30m0-30L0 30" clipPath="url(#b)" stroke="#C8102E" strokeWidth="4" />
<path d="M30 0v30M0 15h60" stroke="#fff" strokeWidth="10" />
<path d="M30 0v30M0 15h60" stroke="#C8102E" strokeWidth="6" /></g>
</svg>
}

    // Add more language options as needed

]

const [language, setLanguage] = useState<string>(i18n.resolvedLanguage ?? 'se')
console.log(language)
const handleLanguageChange = (value: string): void => {
const selectedCode = value
setLanguage(selectedCode)
i18n.changeLanguage(selectedCode).catch(() => { })
}

return (
<div>
<NavDropdown
title={
<>
<span className="me-1">{languageOptions.find(x => x.code === language)?.svg}</span>
{languageOptions.find(x => x.code === language)?.label}
</>}
\>
{
languageOptions.map((option, _index) => (

            <NavDropdown.Item key={option.code} onClick={() => { handleLanguageChange(option.code) }}>
              {option.svg} {option.label}
            </NavDropdown.Item>
          ))
    
        }
      </NavDropdown>
    
    </div>

)
}

export default LanguageSelector`

This is the settings in my i18.js-file:

`import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';


i18n

    .use(Backend)
   
    .use(LanguageDetector)
    
    .use(initReactI18next)
   
    .init({
    react: { useSuspense: true },
    fallbackLng: 'se',
    lng: 'se',
    debug: true,
        resources: {
            en: {
                translation: {
                    color:{
                        green: "Green"
                   
                },

            },
            se: {
                translation: {
                    color:{
                        green: "Grön"
                   
                },
            }
        },

    }

    );


export default i18n;``

Here is an example of a component where i am trying to use UseTranslation:

`import { useTranslation } from 'react-i18next';

const Home = () => {
const { t } = useTranslation();

return (
<div>
<p>{t('color.green')}</p>
</div>
);
}
export default Home`

I have tried with an global variabel but were not successful, apperently global characters is not preferred in react.