title: Rendering more than one RadioButton.Group in react native
body: <p>I have the following two arrays:</p>
  <pre><code>const items =[
      {
          &quot;id&quot;: 1,
          &quot;groupId&quot;: 1,
          &quot;name&quot;: &quot;product1&quot;,
          &quot;price&quot;: 10
      },
      {
          &quot;id&quot;: 2,
          &quot;groupId&quot;: 1,
          &quot;name&quot;: &quot;product2&quot;,
          &quot;price&quot;: 10
      },
      {
          &quot;id&quot;: 3,
          &quot;groupId&quot;: 2,
          &quot;name&quot;: &quot;product3&quot;,
          &quot;price&quot;: 10
      },
      {
          &quot;id&quot;: 4,
          &quot;groupId&quot;: 2,
          &quot;name&quot;: &quot;product4&quot;,
          &quot;price&quot;: 10
      }
  ];
  
   const category = [
          {
              &quot;name&quot;: &quot;optional&quot;,
              &quot;id&quot;: 1,
              &quot;type&quot;: 1
          },
          {
              &quot;name&quot;: &quot;required&quot;,
              &quot;id&quot;: 2,
              &quot;type&quot;: 1
          },
      ]
  </code></pre>
  <p>So, what I am doing I take the category name from array category then after displaying the name of category I am rendering the item that belong to that category from the items array when category.id = items.groupId I did the following to achieve that:</p>
  <pre><code>    &lt;View style={styles.container}&gt;
       {category.map(category =&gt; {
          
         return(&lt;&gt;
        &lt;Text&gt; {category.name}&lt;/Text&gt;
         {items.filter(product =&gt; product.groupId === category.id).map(b =&gt; {
            return(&lt;&gt;
  
                &lt;RadioButton.Group
                    key={b.groupId}
                    value={value}
                    onValueChange={value =&gt; { setValue(value) }}
                                          
                  &gt;
                  &lt;View style={{flexDirection:'row', justifyContent:'center', alignItems:'center'}}&gt;
                       &lt;RadioButton.Item
                           key={b.id}
                           mode='android'
                           label={b.name}
                           value={b.name}
                        /&gt;
                         &lt;Text&gt;${b.price}&lt;/Text&gt;
                   &lt;/View&gt;
                 &lt;/RadioButton.Group&gt;
            &lt;/&gt;)
           
       })
   }
       &lt;/&gt;) })}
      
      &lt;/View&gt;
  </code></pre>
  <p>the problem I am facing is that when i check on of the item in the first group and then i check another item in the second group the value in first group is unchecked. I spent several hours trying to solve it but I'm unable to make it work. the library for radioButtons is RadioButton from 'react-native-paper';</p>
  <p>here is a working example in expo having the same problem
  <a href="https://snack.expo.dev/u389TXW5v" rel="nofollow noreferrer">https://snack.expo.dev/u389TXW5v</a></p>