React Native FlatList onEndReached dont Work

Question

import { useEffect, useState } from "react";
import * as SQLite from "expo-sqlite";

const db = SQLite.openDatabase("gmax8.db");
async function getAllPessoas(page) {
    return new Promise((resolve, reject) => {
        db.transaction((tx) => {
            tx.executeSql(
                "SELECT IdPessoa, RazaoSocial, NomeFantasia, TipoCadastro, CPFCNPJ, IE FROM Pessoas",
                [],
                (tx, results) => {
                    const rows = results.rows;
                    const PessoasData = [];

                    for (let i = 0; i < rows.length; i++) {
                        PessoasData.push(rows.item(i));
                    }

                    resolve(PessoasData);
                },
                (error) => {
                    console.log("Error selecting data from Pessoas table: ", error);
                    reject(error);
                }
            );
        });
    });
}

in the code above i have the Select to the db sqlite and bellow i have the code of the screen where i have a FlatList.the flatList only displays the first 10 of the Select but i have a lot more in it. the problem is that i have the tag onEndReached on the FlatList and it never runs on the first load so a have to comment the TouchableOpacity save the code and unComment and ssave. and then it works

import React, { useState, useEffect } from "react";
import { FlatList, View, Text } from "react-native";
import { getAllPessoas } from "../../config/bd/Select";
import { TouchableOpacity } from "react-native-gesture-handler";

export default function App() {
    const [data, setData] = useState([]);
    const [page, setPage] = useState(1);
    const [filtersActive, setFiltersActive] = useState(false);

    useEffect(() => {
        loadInitialData();
    }, []);

    const loadInitialData = async () => {
        try {
            const newData = await getAllPessoas(page);
            setData(newData);
        } catch (error) {
            console.error("Error loading initial data: ", error);
        }
    };

    const renderListItem = ({ item }) => {
        return (
            <View>
                <Text>{item.RazaoSocial}</Text>
            </View>
        );
    };

    return (
        <View>
            <TouchableOpacity>
                <Text> ola mundo </Text>
            </TouchableOpacity>

            <FlatList
                data={data}
                keyExtractor={(item) => item.IdPessoa.toString()}
                renderItem={renderListItem}
                onEndReached={async () => {
                    const nextPage = page + 1;
                    try {
                        console.log("teste");
                        const newData = await getAllPessoas(nextPage);
                        setData([...data, ...newData]);
                        setPage(nextPage);
                    } catch (error) {
                        console.error("Error loading more data: ", error);
                    }
                }} // Load more data when you reach the end
                onEndReachedThreshold={0.1} // Adjust as needed
            />
        </View>
    );
}

I have tried a lot and the only way it works is by commenting and uncommenting the code.