How to retrieve a value from one Component screen to Home screen that has pop up, without navigation, using react native

Question

I am still a newbie in react native. The project I am working on has a "Total" value (itemTotals) calculated on "DressItem" screen. I now need to get this "itemTotals" in the Home screen, between a "Text" component tag. All these are needed to show only in the Home screen. Thus, there is no navigation. I only need to get the itemTotals in the pop-up that is trigered in the Home screen when some buttons are pressed. Below are the parts of the code

// DressItem screen code
    const DressItem = ({item}) => {  
    const [itemTotal1, setItemTotal1] = useState(0);
    const [itemTotal2, setItemTotal2] = useState(0);
    const [itemTotal3, setItemTotal3] = useState(0);
    const itemTotals = ((itemTotal1 + itemTotal2 + itemTotal3) * (item.quantity));

    const Washing = (item.priceW);
    const Starching = (item.priceS);
    const Ironing = (item.priceI);
    const Clear = (0);
    
    return (
        <View name={{AllTotal}} style={{ alignItems: "center", marginTop: -30, marginBottom: 30, flexDirection: "column", alignContent: "space-between", justifyContent: "center", }}>
                <Text style={styles.underline}>Total  =  # {itemTotals}</Text>
                
                <Button name={(Clear)} onPress={() => (setItemTotal1(Clear)) || (setItemTotal2(Clear)) || (setItemTotal3(Clear))} textColor="white" style={{ borderWidth: 0.1, padding: 1, borderRadius: 15, backgroundColor: "red" }}>Reset</Button>
            </View>

            <View style={{ flexDirection: "row", paddingHorizontal: 30, paddingVertical: 2, justifyContent: "space-between", marginRight: 20, marginLeft: -20 }}>
                <Text style={{ fontWeight: "600", fontSize: 20, color: "grey", marginLeft: 40 }}// onPress={item.itemTotals}
                >#{item.priceW}</Text>
                <Text style={{ fontWeight: "600", fontSize: 20, color: "grey", marginLeft: 40 }}>#{item.priceS}</Text>
                <Text style={{ fontWeight: "600", fontSize: 20, color: "grey", marginLeft: 40 }}>#{item.priceI}</Text>
            </View>

            <Pressable style={{ flexDirection: "row", paddingHorizontal: 30, paddingVertical: 2, justifyContent: "space-between" }}>
                <Button name={(Washing)} onPress={() =>  (setItemTotal1(item.priceW))} textColor="white" style={{ borderWidth: 0.1, padding: 7, borderRadius: 15, backgroundColor: "blue" }}>Washing</Button>
                <Button name={(Starching)} onPress={() => (setItemTotal2(item.priceS))} textColor="white" style={{ borderWidth: 0.1, padding: 7, borderRadius: 15, backgroundColor: "green" }}>Starching</Button>
                <Button name={(Ironing)} onPress={() => (setItemTotal3(item.priceI))} textColor="white" style={{ borderWidth: 0.1, padding: 7, borderRadius: 15, backgroundColor: "#bd4f20" }}>Ironing</Button>
            </Pressable>
)

    // Home Screen Code
    import DressItem from '../components/DressItem';

    export default function HomeScreen() {

    return (

        <Text> Amount = # {itemTotals} </Text>

The last line of the code above is what I have tried to work out. I have tried to call back (make reference) to the value generated in the "DressItem component screen, make it appear inside the parethesis but to no avail. Kindly help me out. Thanks