How to store multiple values separately from the native base picker

I have product attributes like the image above for which I’m mapping the otherDetails array to get the keys i.e. size, color and its variations like small, large etc. To get the variations I’m mapping productValue array. Then I’m showing it in the picker like this

             {product.otherDetails.map((item) => (
                <View style={styles.mainText}>
                  <Text
                    style={{
                      fontSize: RFPercentage(1.6),
                      marginLeft: width / 3,
                      textTransform: "uppercase",
                    }}
                  >
                    {item.productKey}
                  </Text>
                  <View style={{ width: width / 3.2 }}>
                    <Picker
                      note
                      mode="dropdown"
                      selectedValue={attributes}
                      onValueChange={onChangeAttributes.bind(this)}
                    >
                      <Picker.Item label="Select" value="select" />
                      {item.productValue?.map((product) => (
                        <Picker.Item
                          label={product.attributeName}
                          value={product.attributeName.toLowerCase()}
                        />
                      ))}
                     </Picker>

Its rendering fine on the UI but now I want to store the user choice w.r.t the keys. For instance we have two productKeys i.e. size and color, if the user chooses small from the size key and red from the color key. How can I store them separately in a state? and also be able to update the choices w.r.t the keys.