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

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: [],  },];