Básicamente, estoy tratando de guardar el número de teléfono ingresado por el usuario sin llaves, espacios o guiones, pero de alguna manera no puedo hacerlo. Llamo a la expresión regular después de enviar el formulario en la función handleSubmit a través de la configuración del estado y se imprime (y se procesa) sin ningún cambio. ¿Alguna idea de lo que salió mal?

 import React, { useContext, useState, useEffect } from "react"; import DataContext from "../store/data-context"; function Form() { const [name, setName] = useState(""); const [secName, setSecName] = useState(""); const [tel, setTel] = useState(""); const [note, setNote] = useState(""); const [state, setState] = useState({ name: "", secName: "", tel: "", note: "", }); const { dispatchDataState } = useContext(DataContext); const handleSubmit = (e) => { e.preventDefault(); setTel((tel)=>tel.replace(/[^+\d]+/g, "")) console.log(name); dispatchDataState({ type: "ADD_DATA", payload: state }); setState( { name: "", secName: "", tel: "", note: "", } ) console.log(state); }; return ( <div> <form onSubmit={handleSubmit}> <label> Jméno <input type="text" required value={state.name} onChange={(e) => setState({ ... state, name: e.target.value })} /> </label> <label> Příjmení <input type="text" required value={state.secName} onChange={(e) => setState({ ... state, secName: e.target.value })} /> </label> <label> Telefonní číslo <input type="text" required value={state.tel} onChange={(e) => setState({ ... state, tel: e.target.value })} /> </label> <label> Poznámka <input type="text" value={state.note} onChange={(e) => setState({ ... state, note: e.target.value })} /> </label> <input type="submit" value="Odeslat" /> </form> </div> ); } export default Form;