Sé que la pregunta es confusa. Entonces, el problema aquí es que estoy recuperando los datos en el menú desplegable mediante el método de mapa, esos datos provienen del backend.

Y luego aquí hay un objeto que estoy creando en el lado frontal de la aplicación que tiene elementos de campo.

 const [dataType, setDataType] = useState('none') const addGraph = (thisData) => { const graphToAdd = apiResponse.find(curr => curr.name === thisData) const newGraph = { type: graphType, labels: graphToAdd.labels, things: (dataType === 'age' ? graphToAdd.age : (dataType === 'stipend' ? graphToAdd.stipend : graphToAdd.attendance)) } setGraphs((previous) => [...previous, newGraph]) } <!-- begin snippet: js hide: false console: true babel: false -->

 <label htmlFor="dataTypes" style={{'fontWeight':'bold'}}>Data Type:</label> <select className='py-2 px-3 rounded-sm mt-2 border-3 border-black' name="dataTypes" id="dataTypes" onChange={(e) => setDataType(e.target.value)}> { objectKey.map((curr) => ( <option key={curr} className='py-2 px-3 rounded-sm mt-2 border-3 ' value={curr}>{curr}</option> )) } </select>

y aquí está el código para el menú desplegable. Realmente no tengo idea de cómo debo hacer que las "cosas" ingresen el objeto para que, para cualquier valor que seleccione, deba recuperar exactamente los datos del gráfico para agregar. Todo el mapa de datos en el menú desplegable seguramente está presente en graphToAdd en clave: par de valores. También lo siento si no me estoy explicando correctamente.

si los datos contienen otras claves, esas otras claves se asignaron a este menú desplegable.

¿Cuál debería ser un enfoque para hacer esto?