Array not being added to Firebase - reactjs

Question

Still learning Firebase. I'm creating a forum and I'm trying to save the data in Firebase so the data won't disappear when I refresh the page. I added some test data and I got it working just fine. However, when I replace my test data with an array I'm working with that is constantly updated via useState I just get an empty array saved inside Firebase and all the topics I made disappear again when I refresh the page.
Upon clicking a Create Topic button the user inputs a topic title and a message. Everything is stored inside the topic array and each topic is saved as an object inside that array. The object holds a few values like the title of the topic, the user who created it and the date. The message is also saved however I'm just working on the front page for now which displays a list of all the topics. I then have some code which maps through the array and sorts / displays the topics on the main page.
const [topic, setTopic] = useState([]);
const [title, setTitle] = useState();
const [message, setMessage] = useState();
const addTopic = (e) => {
e.preventDefault();
setTopic([
...topic, // the array
{
id: 4,
title: title,
message,
author: "Dagger",
count: 1,
date: new Date(),
},
]);
try {
const docRef = addDoc(collection(firestore, "topics"), {
topic, // the array I'm trying to add
});
console.log("Document written with ID: ", docRef.id);
} catch (e) {
console.error("Error adding document: ", e);
}
};

Answer 1

The problem is that you are using the topic variable which hasn't been updated yet. You should note that useState doesn't update the variable immediately.
You can do this instead.
const [topic, setTopic] = useState([]);
const [title, setTitle] = useState();
const [message, setMessage] = useState();
const addTopic = (e) => {
e.preventDefault();
const updatedTopic = [
...topic,
{
id: 4,
title: title,
message,
author: "Dagger",
count: 1,
date: new Date(),
}
];
setTopic(updatedTopic);
try {
const docRef = addDoc(collection(firestore, "topics"), {
updatedTopic,
});
console.log("Document written with ID: ", docRef.id);
} catch (e) {
console.error("Error adding document: ", e);
}
};