Not able to render children {children} component in react native?

I'm working with i18n library for translate languages and it works but now i want to upgrade things using my Screen component to make the code more light.For doing so i crated my screen component :

interface Props {  children: React.ReactNode;  currentLanguage: string;  setCurrentLanguage: (newlanguage: string) => void;  languages: Language[];  renderNavBar?: () => JSX.Element;}export default function Screen({children}: Props) {  const [currentLanguage, setCurrentLanguage] = useState(i18n.language);  const [value, setValue] = useState(children);  useEffect(() => {    setValue(children);  }, [children]);  return (<View><NavBar        languages={languageList}        currentLanguage={currentLanguage}        setCurrentLanguage={(newLanguage: string) => {          setCurrentLanguage(newLanguage);        }}      /><ScrollView contentContainerStyle={{height: '100%'}}><>{children}</></ScrollView></View>  );}

importing a Navbar that contains the language selector component witch do all the work of translation :

interface Props {  hideNavbar?: boolean;  currentLanguage: string;  setCurrentLanguage: (newlanguage: string) => void;  languages: Language[];}export default function NavBar({  hideNavbar,  currentLanguage,  setCurrentLanguage,}: Props) {  return (<View style={appStyles.headerContainer}><Text style={appStyles.titleScreen}>        TAKE A TOUR OF THE BASILICA OF SANTA MARIA NOVELLA</Text><LanguageSelector        languages={languageList}        currentSelectedLanguage={currentLanguage}        onLanguageChanged={(newLanguage: string) => {          setCurrentLanguage(newLanguage);        }}      /></View>  );}

if helps here is my languageComponent structure :

interface Props {  languages: Language[];  currentSelectedLanguage: string;  onLanguageChanged: (newlanguage: string) => void;}function LanguageSelector({  languages,  onLanguageChanged,  currentSelectedLanguage,}: Props) {  const renderItem = ({item}: {item: Language}) => (<Pressable      onPress={() => {        changeLanguage(item.value);        onLanguageChanged(item.value);      }}      style={{padding: 10, paddingHorizontal: 50}}><Text        style={          currentSelectedLanguage === item.value            ? {                color: appColors.orange,                fontSize: 25,                marginBottom: 10,                fontFamily: 'Work Sans SemiBold',              }            : {                color: appColors.white,                fontSize: 25,                marginBottom: 10,                fontFamily: 'Work Sans SemiBold',              }        }>        {item.label}</Text></Pressable>  );  return (<FlatList      data={languages}      keyExtractor={item => item.value}      renderItem={renderItem}      horizontal      contentContainerStyle={styles.container}    />  );}

right now i want to use Screen in home component to change language of a message as i change the language selected :

HOME SCREEN:

return (<Screen      languages={languageList}      currentLanguage={currentLanguage}      setCurrentLanguage={(newLanguage: string) => {        setCurrentLanguage(newLanguage);      }}><View style={appStyles.flex}><ImageBackground          source={require('@assets/images/cappella-sistina.jpeg')}          style={appStyles.imageScreen}><View style={appStyles.homeOverlay}><View style={appStyles.topTabText}><Text style={appStyles.textScreen}>{__(T.messages.welcome)}</Text><Text style={[appStyles.italicText, {color: appColors.white}]}>                {__(T.messages.interact)}</Text><Text style={appStyles.textScreen}>€ 2,00</Text></View><Pressable              onPress={onSecretButtonCounter}              style={appStyles.settingsButton}            /></View></ImageBackground>        {showKeypadModal && (<KeypadModal onCancel={onCancel} onConfirm={onConfirmPassword} />        )}</View></Screen>  );

It does work only if i control + s my homeScreen after i click the language i selected.i want the component change immediately as i change the language,Please help me i'm crazy about this .