Get value from firebase and use it in useState React native - firebase

Question

First the user chooses his allergies by clicking on a toggle button. If the state is true or false the state is being added successfully to firebase.
Allergy Selctor Page
Then in my homepage I want to retrieve that allergy state and apply it in the allergy list state located on home page.
Home Page Image
I am able to get the state value from firebase using this
useEffect(() => {
firebase
.firestore()
.collection("userDb")
.where("userId", "==", user.email)
.onSnapshot(
(querySnapshot) => {
const newTypes = [];
querySnapshot.forEach((doc) => {
const type = doc.data();
newTypes.push(type);
});
setTypes(newTypes[0].Dairy);
setStatus(type);
},
(error) => {
console.log(error);
}
);
}, []);
useEffect(() => {
const fetchFav = async () => {
try {
const list = [];
await firebase
.firestore()
.collection("userDb")
.get()
.then((querySnapshot) => {
querySnapshot.forEach((doc) => {
const { Dairy, Peanut } = doc.data();
list.push({
userid: doc.id,
dairy: Dairy,
peanut: Peanut,
});
});
});
setPosts(list);
if (loading) {
setLoading(false);
}
} catch (e) {
console.log(e);
}
};
fetchFav();
searchApi(term);
}, []);
But I don't know how to apply this to my state. I wanted to use type in status(type) which gets the actual true/false value when I console log it gets the right value from firebase but for some reason its always true in status(type);
const [status, setStatus] = useState(type);
<Button
onPress={() => setStatus(!status)}
title={`Prevent Dairy: ${
status ? "on (search again for new results)" : "off"
}`}
></Button>
I want it to be dynamic as the user can change his allergies so I didn't use route.params for the allergies.
Any ideas appreciated. Thanks.