const createItem = name => ({
  id:Date.now()+Math.floor(Math.random()*9999999),
  name
})

const [data, setData] = useState([createItem('one')]);
  const add = name => setData([...data,createItem(name)]);
  const remove = item => setData([...data].filter(x=>x.id!=item.id));
  const update = item => setData([...data].map(x=>x.id==item.id?item:x));


<>
    <button onClick={e=>add('new')}>add</button>
    <hr/>
    <div>
      {data.map((item=><div key={item.id}>
        <h2>{item.name}</h2>
        <button onClick={e=>remove(item)}>del</button>
        <button onClick={e=>update({...item,name:'updated'})}>update</button>
      </div>))}
    </div>
    </>

 const deleteNewChild = (childNumber) => {
   const result = [...newChild].filter((item,index) => index + 1 !== childNumber)
     setNewChild(result)
  }