How to create different views for different variables inside a for loop?

I would like to have my page with N elements inside and each of these elements should be placed in groups of 2 (A - B, C - D, E - F).

How do I make it so that when I do my return, the View changes? And, if possible, how do I change views using a for loop?

const length = letter.data?.length;const length2 = length % 2;const nbrlignes = 1 + (length + length2) / 2;

              {letter.data?.map((item, index) => {                    //for (let io; i <= nbrlignes; i++) {}                    return (<View style={{ width: "40%", marginLeft: 70 }}><Text                          style={{                            fontSize: 18,                            fontWeight: "600",                            marginTop: 25,                            width: "50%",                          }}>                          {letter.data[index]}                          {"\n"}</Text><Text style={{ marginTop: 50, width: "50%" }}>                          {letter.description[index]}                          {"\n"}</Text></View>                    );                  })}

Here is my data :

const letter = [  {    id: "1",    name: "A",    data: ["Abricot", "Abricot", "Abricot"],    description: ["Un abricot est un fruit","Un abricot est un fruit","Un abricot est un fruit",    ],  },]