Okay I have a question why when someone clicks on multiple selects answers it does store all the value instead of only storing the last value ?
So let's say I have a select with 2 options only
And then I click on option 1 but decided to change to option 2 at last minute why does it save both data/information in the database ?
It prints like this in the table:

As you can see it does print both schools ("colegios") because I clicked both of them in the select.
This is the snip of code that is relevant, let me know if need full code.
const [idType1, setidType1] = useState([]);
const register = (e) => {
e.preventDefault();
const docRef = db.collection('usuarios').doc(user.uid).collection('estudiantes').doc();
docRef.set({
name: firstName + " " + lastName,
school: idType1,
grade: idType2,
uid: docRef.id,
}).then((r) => {
history.push("/Inicio");
})
}
<select className = "crear_escuela" onChange = {(e) => setidType1([...idType1, e.target.value])} required>
<option value="" disabled selected hidden>Seleccione...</option>
<option value = 'Academia Internacional de Boquete' label = 'Academia Internacional de Boquete' />
<option value = 'Academia Internacional de David' label = 'Academia Internacional de David' />
</select>
The problem is in onChange = {(e) => setidType1([...idType1, e.target.value]).
Every time the value in the select changes, you add the selected value to idType1. Given that this is a dropdown, you'll typically want to replace the existing value of idType1 with the newly selected value.
So:
onChange = { (e) => setidType1(e.target.value) }