When i reload the page on the browser some variables do not populate properly

In React, everytime i reload the page i receive correctly the json from the backend, then i put this array into a function to delete all the key that contain null values. If i console.log the variable is always an empty. The strange thing is that if i modify something about some file and save them, when i switch again into the browser without reloading the page, it populate properly all the variables, this issue come up only when i reload the page.

This is a sample of the json that i receive from the backend:

    [
    {date:01/01/2024, categorieEntrate: lavoro, categorieUscite: spesa, account: banca},
    {date:01/02/2024, categorieEntrate: lavoro, categorieUscite: spesa, account: banca},
    {date:01/03/2024, categorieEntrate: lavoro, categorieUscite: spesa, account: banca},
    {date:01/05/2024, categorieEntrate: null, categorieUscite: spesa, account: banca},
    {date:01/07/2024, categorieEntrate: null, categorieUscite: spesa, account: null},
    {date:01/10/2024, categorieEntrate: null, categorieUscite: spesa, account: null},
    {date:01/12/2024, categorieEntrate: null, categorieUscite: spesa, account: null},
    ]

Below the code:

    const [mesePerMese, setMesePerMese] = useState([]);
    const [annoPerAnno, setAnnoPerAnno] = useState([]);
    const [categorie, setCategorie] = useState([]);       

 useEffect(() => {

        fetch("http://localhost:3000/impostazioni")
            .then(res => res.json())
            .then(data => {
                let a = data["data"];
                console.log("ciao")
                console.log(a);

                let estratto = estraiCategorieEntrateUscite(a);
                setCategorie(estratto);
                console.log(categorie) //when I console.log here the array is empty
            });


        fetch("http://localhost:3000/transazioni")
            .then(res => res.json())
            .then(data => {
                let dati = data["data"];
                const formattato = ISOitaliano(dati);
                const ordinato = ordinaDate(formattato);

                let b = new Statistiche(categorie[0], categorie[1]);

                ordinato.map(rigo => {
                    b.aggiungiTransazione(rigo);
                })
                setMesePerMese(b.ottieniMesePerMese());
                setAnnoPerAnno(b.ottieniAnnoPerAnno());
                console.log("anno per anno")
                console.log(annoPerAnno);
                console.log("mese per mese");
                console.log(mesePerMese);


            });


    }, [])

export function estraiCategorieEntrateUscite(array) {

    let categorieEntrate = [], categorieUscite = [];
    
    array.forEach((item, index) => {
        if (item["categorieEntrate"] !== null && item["categorieEntrate"] !== undefined) {
            categorieEntrate.push(item["categorieEntrate"]);
        }
        if (item["categorieUscite"] !== null && item["categorieUscite"] !== undefined) {
            categorieUscite.push(item["categorieUscite"]);
        }
    });

console.log(categorieEntrate); //i console.log here and the array is fine
console.log(categorieUscite); //i console.log here and the array is fine



    return [categorieEntrate, categorieUscite];
}