tengo este código que estoy usando para almacenar algunos datos en firebase. El código funciona bien, pero quería agregar una opción para que cada vez que alguien agregue un nuevo campo, tengan la opción de eliminarlo en caso de que no sea necesario. Sin embargo, no puedo encontrar una solución a este problema, porque la función que hice elimina todos los campos, no solo el que se hizo clic. ¿Alguna ayuda?

aquí está el código

 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>}