I want to get the data from an input to a label to display the value onChange, but that don't work when the 2 component are in array:

let expForm = [
    <ExperienceForm
      statePosition={(e) => setPosition(e.target.value)}
      stateCompany={(e) => setCompany(e.target.value)}
      stateCity={(e) => setCity(e.target.value)}
      stateFrom={(e) => setFrom(e.target.value)}
      stateTo={(e) => setTo(e.target.value)}
    />,
  ];

  let expDisplay = [
    <DisplayExperience
      statePosition={position}
      stateCompany={company}
      stateCity={city}
      stateFrom={from}
      stateTo={to}
    />,
  ];

I get and change the value like this:

  const [position, setPosition] = useState("Position");
  const [company, setCompany] = useState("Company");
  const [city, setCity] = useState("City");
  const [from, setFrom] = useState("From");
  const [to, setTo] = useState("To");

But I want to dynamically add and delete with this function that I call with a button:

  const [experienceForm, setExperienceForm] = useState(expForm);
  const [experienceDisplay, setExperienceDisplay] = useState(expDisplay);

  const addComponent = () => {
    setExperienceForm([...experienceForm, expForm]);
    setExperienceDisplay([...experienceDisplay, expDisplay]);
  };

and I display them this way:

{experienceForm}
{experienceDisplay}

I'm new to React Js so feel free to pick me up on things that are obvious to you, thanks in advance.