React Native Pressable has to be clicked twice to be executed - firebase

Question

I am using react native and firebase v9. When I click to add a chatroom, an alert prompt pops up, the user enters a room name and firebase should automatically roll it out to the UI. But what happens is when the modal is closed, I then have to click the add button again and then the chat room will roll out. How can I fix this so when the user enters a name, presses ok it automatically shows on the UI? Thanks!
My state:
const [rooms, setRooms] = useState([]);
const [input, setInput] = useState("");
Here is my JSX:
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
<Pressable onPress={handleAddRoom}>
<View style={styles.addRoom}>
<MaterialCommunityIcons
name="plus-circle"
color="black"
size={42}
/>
<Text style={styles.nameText}>Add</Text>
</View>
</Pressable>
Here are my functions for uploading to firebasev9:
const handleAddRoom = () => {
Alert.prompt("Add New Chat Room", "Please enter a name", [
{ text: "CANCEL", onPress: null },
{ text: "OK", onPress: (text) => setInput(text) },
]);
if (input) {
const colRef = collection(db, "rooms");
addDoc(colRef, {
image: inputData,
roomName: input,
});
}
setInput("");
};
const fetchRooms = async () => {
try {
const colRef = query(collection(db, "rooms"), orderBy("roomName", "asc"));
onSnapshot(colRef, (snapshot) => {
setRooms(
snapshot.docs.map((doc) => ({
id: doc.id,
roomName: doc.data().roomName,
image: doc.data().image,
}))
);
});
} catch (err) {
console.log(err);
}
};
useEffect(() => {
fetchRooms();
}, []);