I am rendering a list of elements from a json file i want to be able to let each component in the list have its own state. And be independent of the other elements in the list. I want to have only one element to be able to be clickable and not any of the others, not like what is shown currently in the picture below. [1]: https://i.stack.imgur.com/vdCnR.png

Here is the code i am currently using.

{questions
        .filter((question) => question.id === currentId)
        .map((question, index) => {
          return (
            <>
              <View key={index}>
                {question.title.hasOwnProperty("main") ? (
                  <>
                    <Text style={styles.title}>{question.title.main}</Text>
                    <Text style={styles.subtext}>{question.title.sub}</Text>
                  </>
                ) : (
                  <Text style={styles.title}>{question.title}</Text>
                )}
              </View>
              <View>
                {question.answers.map((ans, i) => (
                  <Answer id={ans.id} key={ans.id} ans={ans} />
                ))}
              </View>
            </>
          );
        })}

 const Answer = ({ ans, id }) => {
const [clkStatus, setClkStatus] = useState(false);
const [ansId, setAnsId] = useState(id);
return (
  <Card
    onPress={() => {
      if (ansId === id) {
        setClkStatus(true);
      }
    }}
    status={clkStatus && "danger"}
    style={{ marginBottom: 6, width: "100%" }}
  >
    <Text
      style={{
        textTransform: "uppercase",
        textAlign: "center",
      }}
    >
      {ans.value}
    </Text>
  </Card>
);

};