How to change radio buttons states individually inside an map?

Question

I have this two radio buttons inside a map and i want to change their states individually, now the behavior is when i toggle one all the radios in the map change.

import React from "react";
import "./styles.css";

const questionario = () => {
  const [checked, setChecked] = useState("yes");

  return (
    <>
      {questions.map((data, i) => (
        <Text style={styles.text}>
          {i + 1} - {data.question}{" "}
        </Text>
        <Text style={{ color: "#fff", fontSize: 18, marginLeft: 10 }}>
          {data.atividades}
        </Text>
        <View style={styles.radioButtonContainer}>
          <RadioButton
            value="yes"
            color="#fff"
            uncheckedColor="#fff"
            status={checked === "yes" ? "checked" : "unchecked"}
            onPress={e => setChecked("yes")}
          />
          <Text style={styles.radioText}>Sim </Text>
        </View>
        <View style={styles.radioButtonContainer}>
          <RadioButton
            value="no"
            color="#fff"
            uncheckedColor="#fff"
            status={checked === "no" ? "checked" : "unchecked"}
            onPress={() => setChecked("no")}
          />
          <Text style={styles.radioText}>Não </Text>
        </View>
      ))}
    </>
  );
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Answer 1

Maybe you have to provide an identifier to your Radio. If I'm not wrong, you should provide the "name" property, so your html will understand that these two radios cannot be checked at the same time.