Javascript – how do I fix Uncaught TypeError: Cannot read properties of undefined (reading 'map') in react, firebase

I am trying to retrieve data from firebase database but am receiving the error mentioned in the title.

I am trying to add a new member from the AddMember.js component (which works) to firebase.

Now I’m trying to retrieve the data when my dashboard loads in the MembersTable.js component.

I understand that you can’t map over an object but am i missing something here and how do i solve this?

Below is my code and the screen shot of the data i’m trying to read.

MembersTable.js

 const [loading, setLoading] = useState(true);


const [userMembers, setUserMembers] = useState([]);

  useEffect(() => {
    onAuthStateChanged(auth, (user) => {
      console.log(`Welcome to your dashboard.. ${user.uid}`);

  // get the data from firebase
  const getData = () => {
    const dbRef = ref(database, `users/${user.uid}/`);
    onValue(dbRef, (snapshot) => {
      const data = snapshot.val();

      var userMembers = data.members;
      console.log(userMembers);

      setUserMembers({ userMembers });
      setLoading(false);
    });
  };
  getData();
});
  }, []);

AddMember.js

const writeMemberToDatabase = (member) => {
const currentUser = auth.currentUser.uid;
const uniqueKey = uuidv4();
const newkey = "hey";

set(child(dbRef, `users/${currentUser}/members/${newkey}`), member)
  .then(() => {
    console.log(`updated ${currentUser}...`);
    setToggle(false);
    setMemberDetails([]);
  })
  .catch((error) => {
    console.log("Error adding member to database: ", error);
      });
  };



 const submitForm = (e) => {
    e.preventDefault();
    console.log("submitted user...");
const member = [
  {
    membername: memberName,
    memberemail: memberEmail,
    membershipprice: membershipPrice,
  },
];

writeMemberToDatabase(member);
setMemberDetails([...memberDetails, member]);

console.log(auth.currentUser);
  };

Please see attached image of my database