i have this code that i'm using to store some data into firebase. The code is working fine but i wanted to add an option that each time someone adds a new field, then them have the option to delete it in case it's not needed. However, i can't come up with a solution to this problem, because the function i've made deletes all the fields, not just the one clicked. Any help?

Here's the code

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

    if(
      !form.steps
    ){
      alert("Please fill out the fields!")
      return
    }
    addDoc(recipesCollectionRef, form)
    setForm({
      steps: []
    })
    setPopupActive(false)
  }

      const handleStep = (e, i) => {
        const stepsClone = [...form.steps]
        stepsClone[i] = e.target.value
        setForm({
          ...form,
          steps: stepsClone
        })
      }
      const handleStepCount = () => {
        setForm({
          ...form,
          steps: [...form.steps, ""]
        })
      }
      const handleStepBack = (e, i) => { //the one i'm having problem with
        const stepsClone = [...form.steps]
        stepsClone[i] = e.target.value
        setForm({
          ...form,
          steps: [...form.steps[i]]
        })
      }
              {popupActive && <div className="popup">
            <div className="popup-inner">
              <h2>Add a new recipe</h2>
              <form onSubmit={handleSubmit}>
                <div className="form-group">
                  <label>Steps</label>
                  {
                    form.steps.map((step, i) => (
                      <>
                      <textarea type="text" key={i} value={step} onChange={e => handleStep(e, i)}/>
                      <button onClick={e => handleStepBack(e, i)}>Remove Step</button>
                      </>
    
                    ))
                  }
                  <button type="button" onClick={handleStepCount}>Add Step</button>
                </div>
                <div className="buttons">
                  <button type="submit">Submit</button>
                  <button type="button" class="remove" className="remove" onClick={() => setPopupActive(false)}>Close</button>
                </div>
              </form>
            </div>
          </div>}