Estoy creando una nueva matriz cada vez que un estado cambia para mostrar una cantidad diferente de campos en la interfaz de usuario.

 const [highestEducation, setHighestEducation] = useState([eduObj]); useEffect(() => { if (edu === "intermediate") { const filled = new Array(2).fill(eduObj); setHighestEducation(filled); } else if (edu === "graduation") { const filled = new Array(3).fill(eduObj); setHighestEducation(filled); } else if (edu === "postGraduation") { const filled = new Array(4).fill(eduObj); setHighestEducation(filled); } else if (edu === "highSchool") { const filled = new Array(1).fill(eduObj); setHighestEducation(filled); } }, [edu]);

Estoy mapeando sobre la educación más alta para mostrar la entrada en el cambio de entrada. He declarado una función que establece el estado según el índice en la matriz de educación más alta.

 const onChangeEdu = (e, id) => { let value = [...highestEducation]; value[id][e.target.name] = e.target.value; setHighestEducation(value); };

pero cuando cambio el valor de la entrada que pasa en el índice y el evento, actualiza todos los valores del objeto en la matriz de educación más alta.