Estaba tratando de acceder al estado principal cuando se llama a una función desde el componente secundario, para eso creé una función en el componente principal y se la pasé al secundario, el problema es que no puedo acceder al estado por completo. por ejemplo, al hacer clic en el botón, agrego un nuevo campo de entrada y un botón de eliminación, supongamos que agregué 10 campos de entrada y los agregué todos en una matriz de estado, pero cuando hago clic en el botón Eliminar del segundo campo de entrada, el recuento que obtengo del estado es 1, similar si hago clic en el quinto botón Eliminar, obtengo la cuenta como 4 y solo me muestra 4 elementos en el estado, pero tiene 10 elementos Aquí hay un enlace de ejemplo https://codesandbox.io/s/add-react-component- onclick-bifurcado-t2i0ll?file=/src/index.js:0-869

 import React, { useState } from "react"; import ReactDOM from "react-dom"; const Input = ({ deleteRow, position }) => { const handleDelete = () => deleteRow(position); return ( <> <input placeholder="Your input here" /> <button onClick={handleDelete}>Delete</button> </> ); }; const Form = () => { const [inputList, setInputList] = useState([]); const onDeleteRow = (position) => { console.log("inputCount", inputList); }; const onAddBtnClick = (event) => { setInputList( inputList.concat( <Input key={inputList.length} position={inputList.length} deleteRow={onDeleteRow} /> ) ); }; return ( <div> <button onClick={onAddBtnClick}>Add input</button> {inputList} </div> ); }; ReactDOM.render(<Form />, document.getElementById("form"));