React18 + MaterialUI

import React from "react";
import styled from "styled-components";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { MiniButton, PrimaryButton } from "../components/UIkit";
import { FooterMobile } from "../components";
import { logOut } from "../connections/users";
import { onAuthStateChanged } from "firebase/auth";
import { auth, db } from "../firebase";
import { doc, getDoc, collection } from "firebase/firestore";
import Avatar from "@mui/material/Avatar";
import dummy from "../assets/img/17.jpg";

const Title = styled.h2`
  color: #444;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 0.125rem;
  line-height: 1.7;
  font-family: "YuGothic", "游ゴシック体", sans-serif;
`;
const SubTitle = styled.h3`
  color: #444;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.125rem;
  line-height: 1.7;
  font-family: "YuGothic", "游ゴシック体", sans-serif;
`;

const Home = () => {
  const navigate = useNavigate();
  const [userId, setUserId] = useState("");
  const [user, setUser] = useState([]);

  // ログインを監視してuserIDを取得
  const authState = () => {
    return onAuthStateChanged(auth, (user) => {
      if (user) {
        const uid = user.uid;
        setUserId(uid);
      } else {
        console.log("ログインしていません");
      }
    });
  };

  // userIDからuser情報を取得
  const fechUser = async () => {
    if (userId !== "") {
      const colRef = collection(db, "users");
      const docRef = doc(colRef, userId);
      await getDoc(docRef).then((doc) => {
        const data = doc.data();
        setUser(data);
      });
    }
  };

  useEffect(() => {
    authState();
    fechUser();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [userId]);

  const submitLogout = () => {
    logOut();
    window.location.reload();
  };

  return (
    <section>
      <div className="m-common-container">
        <div className="m-common-container--inner flex-column f-around">
          <div>
            <Title>REPEATER</Title>
            <SubTitle>- 従業員を評価する -</SubTitle>
            <Avatar>T</Avatar>
            <Avatar alt="Suzuki Tomoko" src="/images/woman01.png" sx={{ width: 28, height: 28 }} />
            <Avatar alt="Suzuki Tomoko" src="/images/48.jpg" sx={{ width: 28, height: 28 }} />
            <Avatar alt="Suzuki Tomoko" src={dummy} sx={{ width: 28, height: 28 }} />
          </div>
          <div className="flex-column">
            <PrimaryButton label={"新規登録"} onClick={() => navigate("/signup")} />
            <PrimaryButton label={"ログイン"} onClick={() => navigate("/signup")} />
          </div>
        </div>
      </div>

      <div></div>
      <FooterMobile />
    </section>
  );
};

export default Home;