Reactjs firebase array map

I have created an app in reactjs, here the user can add data in slots feild, he can add as many slots he want's and based on that the data will be stored as an array in firestore.

My issue is that instead of adding only one igredient at once, the user can add two at the same time so that i can get the data to be stored in firestore something like this. from will be the first ingredient , to will be the second ingredient.

Code :

function App() {
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 handleView = id => {
const recipesClone = [...recipes]

 recipesClone.forEach(recipe => {
 if (recipe.id === id) {
 recipe.viewing = !recipe.viewing
 } else {
  recipe.viewing = false
  }
    })

   setRecipes(recipesClone)
     }

     const handleSubmit = e => {
      e.preventDefault()

      if (
       !form.ingredients ||
          ) {
      alert("Please fill out all fields")
      return
     }

      addDoc(recipesCollectionRef, form)

      setForm({
       ingredients: [],
        })
          setPopupActive(false)
        }

        const handleIngredient = (e, i) => {
        const ingredientsClone = [...form.ingredients]

       ingredientsClone[i] = e.target.value

setForm({
...form,
ingredients: ingredientsClone
})
}

 const handleIngredientCount = () => {
 setForm({
 ...form,
 ingredients: [...form.ingredients, ""]
   })

   { recipe.viewing && <div>
      <h4>Ingredients</h4>
      <ul>
        { recipe.ingredients.map((ingredient, i) => (
          <li key={i}>{ ingredient }</li>
        ))}
      </ul>

If required i can share the entire code too