Estoy usando reaccionar js. Tengo una matriz de atributos de objetos en mi página de un solo producto y estoy mostrando la matriz de objetos en la interfaz de usuario. La interfaz de usuario se ve así:

Estoy tratando de obtener los valores de los atributos seleccionados, configuré el controlador onClick para obtener el valor y la etiqueta, pero solo obtengo el valor que se elimina después de hacer clic en el segundo atributo que no quiero. Quiero almacenar todos los valores y etiquetas de atributos en un estado. Los atributos son dinámicos, a veces serán 2 o más o ninguno.

Este es el código para los atributos dinámicos.

 {product?.attributes.map(attr => { return <div onClick={e => handleAttribute(e.target)} className=" mr-6 items-center"> <span className="mr-3"><b>{attr.label}</b></span><br /> <div className="relative"> <select className="rounded appearance-none border border-gray-200 py-2 focus:outline-none focus:border-indigo-500 text-base pl-3 pr-10"> {attr?.selected.map(select => { return <option>{select.label}</option> })} </select> })}

Esta es la función, pero estoy confundido acerca de cómo puedo obtener los valores y también etiquetar para cada atributo y se almacenará en un estado.

 const handleAttribute = (e) => { console.log(e, 'attr'); }

Mi salida esperada es algo como esto:

 [ {label: colors, selected: Black}, {label: Size, selected: M} ]

La base de datos de atributos se ve así:

 { attributes: [{ label: "colors", selected: [{ label: "Black", value: "Black" }, { label: 'Green', value: 'Green' }] }, { label: "size", selected: [{ label: "M", value: "M" }, { label: 'S', value: 'S' }] } ] }