экран не отображается каждый раз - реагируйте родным

Question

Привет, так что я новичок в реагировании на нативную версию, и у меня возникла проблема, когда не все компоненты отображаются на экране. Мой проект - кредитный калькулятор; поэтому я разрешаю пользователю загрузить файл, анализирую файл и получаю всю важную информацию, чтобы создать для них новые ссуды, а затем отображать ее. Когда я это делаю, отображается только последний. Может ли кто-нибудь помочь мне понять, почему это происходит.

Вот мой связанный код:

//this is where I allow the user to upload the file 
const pickDocument = async () => {
        try {
            let input = await DocumentPicker.getDocumentAsync({
                type: "text/plain",
            });
            setUserOut(await FileSystem.readAsStringAsync(input.uri));
        } catch (error) {
            console.log(error);
        }

        createLoans();
};

//where i remove all useless info and create loans array 
const fileParser = () => {
    const parsedLoans = [];
    var newUserOut = userOut;

    if (newUserOut.length == 0) {
        return;
    }
    //remove the grants
    var grantPos = newUserOut.search("Grant Type:");
    var pos = newUserOut.search("Loan Type:");
    //hopefully just the loans now
    newUserOut = newUserOut.slice(pos, grantPos);

    while (newUserOut.length > 0) {
        var lastPos = newUserOut.lastIndexOf("Loan Type:");
        parsedLoans.push(newUserOut.slice(lastPos, newUserOut.length));
        newUserOut = newUserOut.slice(0, lastPos);
    }
    //console.log('parsed loans: ' + parsedLoans)
    return parsedLoans;
};
//extract important info for each loan and call the method that creates the loans
const createLoans = () => {
    const newLoans = fileParser();
    const title= 'Loan Amount:$'
    const interest = 'Loan Interest Rate:'

    for(let i =0; i < newLoans.length; i++){
        var loan = newLoans[i]
        var goalTitle=loan.substring(loan.indexOf(title)+title.length,loan.indexOf('Loan Disbursed Amount:'))
        //console.log("goalTitle: " + goalTitle)
        var interestRate = loan.substring(loan.indexOf(interest)+interest.length,loan.indexOf('Loan Repayment Plan Type'))
        //console.log("Interest rate: "+ interestRate)
        var years = 0
        var paidOff = 0

        addGoalHandler(goalTitle,interestRate,years,paidOff)
    }

};
//this is where I actually create the loan objects with the right info and try to display it to the screen
const addGoalHandler = (goalTitle, interestRate, years, paidOff) => {
        //setCourseGoals([...courseGoals, enteredGoal])
        setCourseGoals((prevGoals) => [
            ...courseGoals,
            {
                id:userId.toString() + goalCounter.toString(),
                value: goalTitle,
                interest: interestRate,
                years: years,
                paidOff: paidOff
            }
        ]);
        var oldIDS = docIDS 
        oldIDS.push(userId.toString() + goalCounter.toString())
        setDocIDS(oldIDS)
        setGoalCounter(goalCounter+1)
        setIsAddMode(false);
    };