Firestoreのフィールドの値を別々に表示させたい

/* eslint-disable jsx-a11y/alt-text */
/* eslint-disable @next/next/no-img-element */
/* eslint-disable react/jsx-no-undef */
/* eslint-disable @next/next/no-img-element */
/* eslint-disable react/jsx-no-comment-textnodes */
import React, { useEffect, useRef, useState } from "react";
import {
  getProviders,
  getSession,
  GetSessionParams,
  useSession,
} from "next-auth/react";
import { useRouter } from "next/router";
import { db, storage } from "../../firebase";
import {
  addDoc,
  collection,
  doc,
  serverTimestamp,
  updateDoc,
  getDocs,
  getFirestore,
  query,
  where,
} from "@firebase/firestore";
import Menubar from "../../components/Menubar/Home";
import { getDoc, onSnapshot, orderBy } from "firebase/firestore";
import Card from "../../components/profile/Card";

export default function Profile() {
  const { data: session } = useSession();
  const router = useRouter();
  const { id }: any = router.query;
  const [accounts, setAccouts] = useState([]);
  const [userData, setUserData] = useState();

  const userRef: any = doc(db, `accounts/${id}`);

  useEffect(() => {
    // getData(){
    getDoc(userRef).then((documentSnapshot) => {
      if (documentSnapshot.exists()) {
        const data: any = documentSnapshot.data();
        console.log("Document data:", data);
        setUserData(data);
      } else {
        console.log("No such document!");
        setUserData(undefined);
      }
    });
    // }
  }, []);

  if (userData == undefined) {
    console.log(userData);
    return <></>;
  }
  return (
    <>
      <Menubar />
      <p>idは{id}です</p>
      {Object.keys(userData).map((key: any) => {
        return <div key={key}>{userData[key]}</div>;
      })}
      <p>^^^^^^^^^</p>
    </>
  );
}

export async function getServerSideProps(context: GetSessionParams) {
  const providers = await getProviders();
  const session = await getSession(context);

  return {
    props: {
      providers,
      session,
    },
  };
}