how to set onChange handler to change the language in react i18next - reactjs

Question

-the select form that allow the user to change the language don't work with onclick how can I use onChange handler
am using react i18next.
*keep in mind that am not getting any errors or warnings.
this is my code
import i18n from 'i18next';
export default function Footer() {
const languages = [
{
code: "fr",
name: "francais",
countryCode:"fr"
},
{
code: "en",
name: "english",
countryCode:"gb"
},
{
code: "ar",
name: "العربية",
countryCode:"sa"
}
]
return <Form.Select aria-label="Default select example" >
{languages.map(({code,name, countryCode})=>{
return(
<option key={countryCode} onClick={()=> i18n.changeLanguage(code)}>{name}</option>
)
})}
</Form.Select>
}

Answer 1

The onChange handler to change the language needs to be set on the Form.Select component, like this: https://codesandbox.io/s/react-code-works-on-mozilla-but-but-dont-on-chrome-forked-1lkvw?file=/src/Footer.js:579-657
import { useTranslation } from "react-i18next";
import { Container, Form } from "react-bootstrap";
export default function Footer() {
const { i18n } = useTranslation();
const languages = [
{
code: "fr",
name: "francais",
countryCode: "fr"
},
{
code: "en",
name: "english",
countryCode: "gb"
},
{
code: "ar",
name: "العربية",
countryCode: "sa"
}
];
return (
<div className="section footer">
<Container>
<Form.Select
defaultValue={i18n.resolvedLanguage}
onChange={e => {
i18n.changeLanguage(e.target.value);
}}
>
{languages.map(({ code, name, countryCode }) => {
return (
<option
key={countryCode}
value={code}
>
{name}
</option>
);
})}
</Form.Select>
</Container>
</div>
);
}