How can I display displayName of firebase on a screen? (React, Firebase v9, JavaScript)

Question

I have been having a problem with displaying a displayName of firebase user. I am trying to display user's displayName on a screen on a sidebar section. The displayName is set when a user creates an account. (In Register.js, the displayName property is set when a user types userID.) Then, once the user logs in, I would like to display the displayName on a screen. However, it does not work. Is it because, the version of firebase I am using is version 9 and "setUser" is not working? Could anyone help with this?

App.js

import React, {useState} from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { getAuth, onAuthStateChanged } from "firebase/auth";
import { app } from "./firebase.js";
import "./App.css";
import LoginHeader from "./LoginHeader.js";
import { Outlet } from "react-router";
import Login from "./Login.js";
import RegisterHeader from "./RegisterHeader.js";
import Register from "./Register.js";
import HomeHeader from "./HomeHeader.js";
import Sidebar from "./Sidebar.js";
import Post from "./Post.js";
import News from "./News.js";

function App() {

const [user, setUser] = useState([]);
const auth = getAuth(app);

auth.onAuthStateChanged((authUser) => {
  if(user){
    setUser(authUser);
  }
  else{
    setUser(false);
  }
})

  return (
      <Router>
      <div className="App">
        <Routes>
          <Route path = "/" element = {<LoginHeader />} />
        </Routes>
        <Routes>
             <Route path = "/" element = {<Login />} />
        </Routes>
        <Routes>
          <Route path = "/register" element = {<RegisterHeader />} />
        </Routes>
        <Routes>
          <Route path = "/register" element = {<Register />} />
        </Routes>
        <Routes>
          <Route path = "/home" element = {<HomeHeader />} />
        </Routes>
        <div className = "appBody">
          <Routes>
            <Route path = "/home" element = {<Sidebar user = {user} /> }/>
          </Routes>
          <Routes>
            <Route path = "/home" 
            element = {<div className = "homePosts"> <Post /> </div>} />
          </Routes>
          <Routes>
            <Route path = "/home" element = {<News />} />
          </Routes>
          </div>
          </div>
      </Router>
    
  );
}

export default App;

Sidebar.js

import React from 'react';
import './Sidebar.css';
import SidebarOption from './SidebarOption';
import SentimentSatisfiedAltIcon from '@material-ui/icons/SentimentSatisfiedAlt';
import HomeIcon from '@material-ui/icons/Home'; //importing an icon image
import ProfileIcon from '@material-ui/icons/Person'; //importing an icon image
import ChatIcon from '@material-ui/icons/Chat'; //importing an icon image
import HelpIcon from '@material-ui/icons/Help'; //importing an icon image

function Sidebar({user}) {

    return (
        <div className = "sidebar">
            <SidebarOption avatar Icon = {SentimentSatisfiedAltIcon} title = {user?.displayName} />
            <SidebarOption Icon = {HomeIcon} text = "Home"/>
            <SidebarOption Icon = {ProfileIcon} text = "Profile"/>
            <SidebarOption Icon = {ChatIcon} text = "Chat"/>
            <SidebarOption Icon = {HelpIcon} text = "Help"/>

        </div>
    );
}

export default Sidebar; //allow to use outside the file 

Register.js

import React, {useState} from 'react'
import "./Register.css";
import { Link } from "react-router-dom";
import { app } from "./firebase.js";
import { getAuth, createUserWithEmailAndPassword, SAMLAuthProvider, updateProfile} from "firebase/auth";
import { useNavigate } from "react-router-dom";

function Register() {
    const auth = getAuth(app)
    const [userID, setUserID] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const navigate = useNavigate("");

    const register = () => {
        console.log(email, password);
        createUserWithEmailAndPassword(auth, email, password)
        .then((userCredentials) => {
            const user = userCredentials.user;
            console.log("user", user);
            updateProfile(auth.currentUser, {
                displayName: userID
            }).then((s) => {
                navigate("/");
            }).catch((error) => {
                alert(error.message);
            })
        });
    }
    

    return (
        <div className = "register">
            <div className = "registerContainer">
                 <h3>Find, Share and Connect</h3>
                 <div className = "slogan2">
                      <h3>Join to find YOUR own travel</h3>
                 </div>
                 <div className = "form">
                 <center>
                      <input onChange = {(event) => setUserID(event.target.value)}
                      type = "text" 
                      className = "registerName"
                      placeholder = "UserID" 
                      />
                 </center>
                 <center>
                      <input onChange = {(event) => setEmail(event.target.value)}
                      type = "text" 
                      placeholder = "Email Address" 
                      />
                 </center>
                 <center>
                      <input onChange = {(event) => setPassword(event.target.value)}
                      type = "password"
                      placeholder = "Password"
                      />
                 </center>
                 <center>
                      <button onClick = {register}
                      className = "registerRegister">
                      Create New Account
                      </button>
                 </center>
                 </div>
            </div>
        </div>
    )
}

export default Register

Answer 1

As shown in the Firebase documentation on getting the current user , the v9 syntax for onAuthStateChanged is:

onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});

So in your case that'd be:

onAuthStateChanged(auth, (authUser) => {
  if(user){
    setUser(authUser);
  }
  else{
    setUser(false);
  }
})