Continuación de la solución de problemas desde Agregar datos a la matriz usando UseState onChange

Hola, estoy tratando de hacer un botón que agregue un nuevo campo de entrada, luego, cuando hago clic en otro botón de envío, quiero tomar el valor de todos los campos de entrada y agregarlos a una matriz en un estado de uso.

Primero intenté hacerlo como en la publicación vinculada (agregando valor del campo de entrada en Blur), el problema con esto es que si el usuario retrocede y cambia el valor en un campo de entrada, el valor anterior seguirá siendo allá. Necesito definir que el usuario ha terminado de escribir cuando hace clic en el botón Enviar.

Entonces, ahora estoy pensando que necesitaré crear una función que se ejecute con otro botón de envío, pero ¿cómo obtendré los valores de los campos de entrada creados dinámicamente? Entiendo cómo obtener valor de una entrada usando un estado con onChange, pero podría ser 1 campo de entrada o podría ser 100.

¿Cómo podría agregar dinámicamente un nuevo campo de entrada, guardar el valor de todos los campos de entrada creados, en una matriz de estado, cuando hago clic en el botón Enviar?

Código relevante hasta ahora

 const [subjectFieldsCounter, setSubjectFieldsCounter] = useState([]) const [subject, setSubject] = useState([]);

 function addSubjectField(){ setSubjectFieldsCounter(oldArray => [...oldArray, "randomValueToIncreaseArraySize"]) }

 <div> <h4>Emne:</h4> <input type="text" placeholder={"Eks. 'Random subject'"} onBlur={(e) => setSubject(oldArray => [...oldArray, e.target.value])}/> <div><button onClick={addSubjectField}>+</button></div> {subjectFieldsCounter.map((field) => ( <h2> <input type="text" placeholder={"Eks. 'Random subject'"} onBlur={(e) => setSubject(oldArray => [...oldArray, e.target.value])}/> </h2> ))} </div>