Convert an array to array map in reactjs firebase - reactjs

Question

In my app, user can input the timings of his slots and the data will be stored in the firebase, but the data is not being stored as a map. It's being stored like this, can someone tell how to achieve this or share a tutorial.
I want it to be stored as an array map, where people can add multiple slots instead of just one slot, i realise i need it store as an array map but i am not able to create one, something like this :
Code :
const [recipes, setRecipes] = useState([])
const [form, setForm] = useState({
ingredients: [],
const [popupActive, setPopupActive] = useState(false)
const recipesCollectionRef = collection(db, "recipes")
useEffect(() => {
onSnapshot(recipesCollectionRef, snapshot => {
setRecipes(snapshot.docs.map(doc => {
return {
id: doc.id,
viewing: false,
...doc.data()
}
}))
})
}, [])
const handleSubmit = e => {
e.preventDefault()
if (
!form.ingredients ||
!form.steps
) {
alert("Please fill out all fields")
return
}
addDoc(recipesCollectionRef, form)
setForm({
ingredients: [],
steps: []
})
setPopupActive(false)
}
const handleIngredient = (e, i) => {
const ingredientsClone = [...form.ingredients]
ingredientsClone[i] = e.target.value
setForm({
...form,
ingredients: ingredientsClone
})
}
return (
<div className="App">
<h1>My recipes</h1>
<button onClick={() => setPopupActive(!popupActive)}>Add recipe</button>
<div className="recipes">
{ recipes.map((recipe, i) => (
<div className="recipe" key={recipe.id}>
{ recipe.viewing && <div>
<h4>Ingredients</h4>
<ul>
{ recipe.ingredients.map((ingredient, i) => (
<li key={i}>{ ingredient }</li>
))}
</ul>