So i am making a quiz app and the problem is i need to highlight checked answer button. I figured out how to do it with Refs, but it works for only three questions. How do i change it to work for the whole test. mapping through question answers

                <TouchableOpacity
                  key={answers.buttonId}
                  onPress={() => {
                    checkIfCorrect(answers.isCorrect);

                    resetColors(answers.buttonId);
                    highlightBlack(answers.buttonId);
                  }}
                  style={{
                    borderWidth: 1,
                    width: "80%",
                    margin: "5%",
                  }}
                >
                  <View ref={(el) => (myRefs.current[answers.buttonId] = el)}>
                    <Text
                      style={{
                        color: "grey",
                        fontSize: 32,
                        textAlign: "center",
                      }}
                    >
                      {answers.answerText}
                    </Text>
                  </View>
                </TouchableOpacity>
              ))}```
Array element with question
```{
      questionNumber: 3,
      questionText: "Solve 1 - 5x = 0.",
      questionImage: "",
      answers: [
        { answerText: "5", isCorrect: true },
        { answerText: "-1/5", isCorrect: false },
        { answerText: "1/5", isCorrect: true },
        { answerText: "4", isCorrect: false },
      ],
    },```

This how i use refs
```  const highlightBlack = (itemId) => {
    myRefs.current[itemId].setNativeProps({
      style: { backgroundColor: "black" },
    });
  };

  const resetColors = (itemId) => {
    myRefs.current.forEach((ref) => {
      if (ref !== itemId) {
        ref.setNativeProps({ style: { backgroundColor: "white" } });
      }
    });
  };```

It crashes after the 3rd question