Quiero eliminar elementos de una matriz que se insertan en una matriz de estado. Puedo agregar, pero la eliminación es un poco confusa para mí en términos de reacción. La función de eliminación actual no funciona, ya que elimina todo, pero ¿el primer elemento? Solo quiero poder eliminar los datos agregados, por ejemplo, 5,6,7,8

Stackblitz: https://react-ts-p6iwoh.stackblitz.io

Código hasta ahora:

 import React, { Component } from 'react'; import { render } from 'react-dom'; import './style.css'; interface Idata { name: string; values: number[]; } const initialData: Idata[] = [ { name: 'Title 1', values: [98, 15, 7, 8], }, { name: 'Title 2', values: [44, 5, 7, 8], }, { name: 'Title 3', values: [5, 7, 8, 9], }, { name: 'Title 4', values: [76, 88, 9, 5], }, ]; const addData: Idata[] = [ { name: 'Title 5', values: [98, 15, 7, 8], }, { name: 'Title 6', values: [44, 5, 7, 8], }, { name: 'Title 7', values: [5, 7, 8, 9], }, { name: 'Title 8', values: [76, 88, 9, 5], }, ]; const App: React.FunctionComponent = () => { const [tag, setTag] = React.useState<Idata[]>(initialData); return ( <React.Fragment> <div className="intial-data"> {tag?.map((inner: Idata, index: number) => { return <div key={index}>{inner.name}</div>; })} </div> <br /> <div> {addData?.map((inner: Idata, index: number) => { return ( <React.Fragment key={index}> <div> {inner.name}{' '} <button onClick={() => setTag((oldArray) => [...oldArray, addData[index]]) } > Add </button> <button onClick={() => setTag((oldArray) => oldArray.splice(index, 1)) } > Remove </button> </div> </React.Fragment> ); })} </div> </React.Fragment> ); }; render(<App />, document.getElementById('root'));