Array Data gets overwritten when page is refreshed Firebase React js - arrays

Question

I want to add a list of topics into the firebase database. Each user in the database will be able to add a list of topics that are unique to them.
It adds the data correctly but when I refresh it and try to add another item in the list, the list in the database is erased, and overwritten. How can I fix this?
constructor(props){
super(props);
this.state = {
list:[],
};
}
onSubmitL = e => {
e.preventDefault();
const db = firebase.firestore();
var change = this.state.list;
//this.state.list.push(this.state.temp);
var textbox = document.getElementById("list");
var temp = textbox.value;
if (temp.length == 0) {
console.log("input empty!");
} else {
this.state.list.push(temp);
}
console.log("current " + this.state.list);
db.collection("users").where("email", "==", firebase.auth().currentUser.email)
.get()
.then(snapshots => {
snapshots.forEach(doc => {
const docData = doc.data();
doc.ref.update({
list: this.state.list,
});
})
})
.catch(function(error) {
console.log("Error getting documents: ", error);
});
this.state.item="";
};
updateList = e => {
};
render () {
const { currentUser } = this.state
return (
<div>
<form onSubmit={this.onSubmitL}>
<input
name="topics"
id="list"
onChange={this.onChange}
type='list'
placeholder="list"
onChange={this.updateList}
/>
<button type="submit">Apply Changes</button>
</form>
<div>
</div>
</div>
);
}

Answer 1

I dont know if this is the only problem but it should be
snapshots.docs.forEach(doc => { ...
not
snapshots.forEach(doc => { ...
you might be able to try using a ... doc(doc.id)set()with { merge: true }
db.collection("users").where("email", "==",
firebase.auth().currentUser.email)
.get()
.then(snapshots => {
snapshots.docs.forEach(doc => {
const docData = doc.data();
doc.ref.update({
list: this.state.list,
});
})
})
see https://firebase.google.com/docs/firestore/manage-data/add-data?authuser=0