Im new in react and i want to load some data from my example database but every time i load the starting page, i got this error. i dont know why my arrry should be undefined. does someone has an answer for me in this case? im struggeling over hours with it. im working with the newest version of react. i deleted the url of my database because its private. at the end you can see the errormessage and the database structure

here is my code:

import { useState, useEffect } from "react";
import GoalList from "../components/goals/GoalList";
function AllGoalsPage() {
const [isLoading, setIsLoading] = useState(true);
const [loadedGoals, setLoadedGoals] = useState([]);
useEffect(() => {
setIsLoading(true);
fetch(
  "my-database"
)
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    const goals = [];
    for (const key in data) {
      const goal = {
        id: key,
        ...data[key],
      };
      goals.push(goal);
    }
    setIsLoading(false);
    setLoadedGoals(goals);
    console.log(goals);
  });
}, []);
 if (isLoading) {
return (
  <section>
    <p>Loading...</p>
  </section>
);
}
return (
<section>
  <h1>All Goals</h1>
  <GoalList goalsList={loadedGoals} />
</section>
);
}
export default AllGoalsPage;