React native – Persisiting states when navigating between screens in react-native

I am using react native’s createNativeStackNavigator to navigate between two screens, say screen A and Screen B. Each screen have their own states and also each have their own buttons that can change their state. The problem I am facing is when I navigate say from screen A to screen B and I go back to screen A, the states of screen A are reset to their initial state. How can I persist the states of each screen when navigating from one to another?I can do it with asyncstorage, But I was wondering if there is a better way to do it without having to use asyncstorage? for example , in the following two components,when i set isSelected to true, and navigate back to profile screen and come back again to screen setings, the state of isSelected dchanges to its default value.
thank you for you help in advance.

const ProfileStack = createNativeStackNavigator();
const ProfileStackScreen = () => {
  return (
    <>
    <ProfileStack.Navigator initialRouteName = "Profiles">
        <ProfileStack.Screen name ="Profiles" component={Profile}/>
        <ProfileStack.Screen name="settings" component={Settings}/>
    </ProfileStack.Navigator>
    </>
  )
}

export default ProfileStackScreen

const Settings = ({navigation,route}) => {
    const Praise = useCallback(({message,txtclr})=>{
    const [isSelected, setSelection] = React.useState(false);
        return (
            <View style={styles.checkboxcontainer}>
                <Switch 
                    value={isSelected}
                    onValueChange={()=>{
                        if(message==="DarkMode"){
                            toggleTheme()
                        }
                        setSelection(prev=>!prev)
                        
                    }}
                    style={styles.checkbox}
                />
            </View>
        )
    },[])
    const CommonComp = ({title}) =>{
        return (
            <TouchableOpacity style={{margin: 6}}>
                <Text style={[styles.txt,{color:txtColr}]}>{title}</Text>
            </TouchableOpacity>
        )
    }
    const TogtherComp = ({msg}) =>{
        return (
            <TouchableOpacity>
                <View style={{flexDirection: "row",margin: 6}}>
                <Praise txtclr={txtColr} message={msg} />
                </View>
            </TouchableOpacity>
        )
    }
  return (
    <SafeAreaView style={{backgroundColor:bgcolr,flex:1}}>
      <ScrollView>
            <Text style={[{color:txtColr ,marginTop: 12},styles.txtsH]}>Notification Settings</Text>
            
            <CommonComp title="Followed Users" />  
            <TogtherComp msg="DarkMode"/>
            <CommonComp title="Delete Account"/>
            <CommonComp title="Logout" />
        </ScrollView>
    </SafeAreaView>
  )
}

const Profile = ({navigation})=>{
    const RowMsg =({title,icnName})=>{
        return (
            <TouchableOpacity>
                <View style={{flexDirection: "row",margin: 6}}>
                    <Icon style ={styles.ics} name= {icnName}/>
                    <Text style={[styles.txt,{color:txtColr}]}>{title}</Text>
                </View>
            </TouchableOpacity>
        )
    }
    const FundPart =({title,icnName}) =>{
        return (
            <View style={styles.fundsmsg}>
                <Icon style={{marginLeft: 18,marginTop: 4,marginRight: 5}} name={icnName}/>
                <Text style={{color: txtColr}}>{title}</Text>
            </View>
        )
    }
    return (
        <SafeAreaView style={{backgroundColor:bgcolr}}>
            <View>
            <TouchableOpacity onPress={()=>navigation.navigate("settings")}>
            <Icon size={18} name="gear" style={{marginLeft: 370,marginTop: 12}}/>
            </TouchableOpacity>
            </View>
           
                <View>
                    <Text style={[styles.maintxt,{color:txtColr}]}>Buying and Selling</Text>
            
                    <RowMsg icnName="calendar" title="Listings" />
                    <RowMsg icnName="search" title="Purchases" />
                    <RowMsg icnName="heart-o" title="Favourites" />
                    <RowMsg icnName="file-o" title="Aapp savings" />
                </View>
            </View>
            </ScrollView>
        </SafeAreaView>
    )
}