First Loop index is misread inside nested component

I need to loop over a set of questions then create a component and update it based on the index of the first loop, the index of the first map is read correctly in the Text component at the 5th line, but is read incorrectly anywhere inside the TwoModals component.

{
  questionsSets.map((q, qIndex) => {
    return (
      <View>
        <Text style={{ color: 'green' }}>INDEX: {qIndex}</Text>
        <TwoModals
          firstModalVisible={modalLevelVisible}
          setFirstModalVisibility={(modalView) => setModalLevelVisible(modalView)}
          firstModalTitle={"Select Level: "}
          firstModalSelected={modalLevelSelected[qIndex]}
          firstItemValue={props.QuestionsTitles.map((item, index) => {
            return (
              <Pressable onPress={() => changeLevel(item, qIndex, index)}>
                <Text style={[GlobalStyles.smallText, { padding: hp('0.5%') }]}>{item[0]}</Text>
              </Pressable>
            )
          })}
          secondModalVisible={modalSubLevelVisible}
          setSecondModalVisibility={(modalView) => setModalSubLevelVisible(modalView)}
          secondModalTitle={'Sub-Level:'}
          secondModalSelected={modalSubLevelSelected[qIndex]}
          secondItemValue={props.QuestionsTitles[selectedLevelIndex[qIndex]][1].map((item, index) => {
            return (
              <Pressable onPress={() => changeSubLevel(item, qIndex, index)}>
                <Text style={[GlobalStyles.smallText, { padding: hp('0.5%') }]}>{item}</Text>
              </Pressable>
            )
          })}
        />
      </View>
    )
  })
}