[Solved]-React: same component reappearing multiple times in the app, how can I make sure that all states are captured accurately and not just the last?-Reactjs

So I found a way, but it seems a much more Javascript way and seems to ignore many of the things which make react worth using, such an not directly interacting with the DOM: In the fiddle this will be placed in the PlusContentHolder part

const titleInfoHandler = (x) => {
    let titleArray = [];
    let allTerms = {};

    document.getElementsByName("title").forEach((title) =>{
      titleArray.push(title.value)
   })

   for(let i = 0; i < titleArray.length; i++){
     allTerms[i] = {...allTerms[i], title: titleArray[i]}
   }

    setPlusContent((prevState) => {
      return{...prevState, titleArray}})
   props.titlePointer(plusContent)
  };

I am still looking for a better way, as I have more than just a title input in this component, so any feedback, criticism etc. would be appreciated :)