React Context not updating when calling the function - reactjs

Question

I Implement multiple language on my website, using different json file for translation.
I want to import different json based on user select.
I use context Api to use Json file But
Initial context doesn't change when calling userLanguageChange function,
import {
dictionaryList,
languageOptions,
} from "../translations/LanguageSelector";
import React, { createContext, useState, useEffect } from "react";
export const LanguageBisContext = createContext({
userLanguage: "it",
dictionary: dictionaryList.it,
});
export function LanguageBisProvider({ children }) {
const defaultLanguage = window.localStorage.getItem("rcml-lang");
const [dictionary, setDictionary] = useState(dictionaryList[defaultLanguage]);
const [userLanguage, setUserLanguage] = useState(defaultLanguage);
const provider = {
userLanguage,
dictionary: dictionaryList[userLanguage],
userLanguageChange: (selected) => {
console.log("questa è la lingua selezionata:" + selected);
const newLanguage = languageOptions[selected] ? selected : "en";
setUserLanguage(newLanguage);
console.log(dictionaryList[newLanguage]);
/* window.localStorage.setItem("rcml-lang", newLanguage); */
},
};
return (
<LanguageBisContext.Provider value={provider}>
{children}
</LanguageBisContext.Provider>
);
}
then I use this component to change language
export default function LanguageSelector() {
const { userLanguage, userLanguageChange } = useContext(LanguageBisContext);
console.log(userLanguage);
// set selected language by calling context method
const handleLanguageChange = (e) => {
console.log(e.target.value);
userLanguageChange(e.target.value);
};
return (
<select onChange={handleLanguageChange} value={userLanguage}>
{Object.entries(languageOptions).map(([id, name]) => (
<option key={id} value={id}>
{name}
</option>
))}
</select>
);
}