How to call an element that was created when you click on a button?

Question

Here is my issue: I created a glossary (a list with the 26 lettters and the words for each letter). I want to make it so that when I click on one of the letter (I have 26 buttons), it will lead to a scroll down to the letter in question. BUT the main issue is that the glossary doesn't change if the page is not refreshed. So when I click on a button, I can't use a if() in order to choose my letter (because the part creation of the glossary has been done). So how do I made my code dynamic? This question is the continuation of my other question : React Native Typescript : scroll with useRef and scrollIntoView. The code is there (basic version):

import React from "react";
import { View, Text, ScrollView } from "react-native";

export default function App({ navigation }: { navigation: any }) {
  const fieldRef = React.useRef<null | HTMLInputElement>(null);
  const scrollToElement = () => fieldRef.current?.scrollIntoView();

  return (
    <View>
      <ScrollView>
        <View>
          <Text>Glossary</Text>
          <View>
            {letter.map((letter) => {
              if (letter.data.length >= 1) {
                return (
                  <View>
                    <Text
                      onPress={() => {
                        {
                          scrollToElement;
                        }
                      }}
                    >
                      {letter.name}
                    </Text>
                  </View>
                );
              }
            })}
          </View>

          <View>
            {letter.map((letter) => {
              return (
                <View>
                  <View>
                    <div
                      ref={fieldRef} //this is done at the loading of the page, not after
                    >
                      <Text>{letter.name}</Text>
                    </div>
                  </View>
                </View>
              );
            })}
          </View>
        </View>
      </ScrollView>
    </View>
  );
}
const letter = [
  {
    id: 1,
    name: "A",
    data: ["Abricot", "Abricot", "Abricot", "Artichaud", "Artichaud"],
    description: [
      "Un abricot est un fruit",
      "Un abricot est un fruit",
      "Un abricot est un fruit",
      "Un artichaud est un légume",
      "Un artichaud est un légume",
    ],
  },
  {
    id: 2,
    name: "B",
    data: ["Branche", "Branche", "Branche"],
    description: [
      "Une branche vient d'un arbre",
      "Une branche vient d'un arbre",
      "Une branche vient d'un arbre",
    ],
  },
  {
    id: 3,
    name: "C",
    data: [],
    description: [],
  },
];