I am creating a new Array every time an state is changing to display different number of fields on UI.

  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]);

I am mapping over the highest education to display input on change of input i have declared a function which sets the state accourding to index in highest education array.

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

but when i change the value of input passing in index and event it updates all object value in highest education array.