User’s username not appearing on React navigation bar

I am using React to create a Navbar component for your website. The Navbar should display the user’s username, the user is logged in, and provide links to various pages on the website. I am using localStorage to store the user’s data, and axios to make API requests. However, i am encountering an issue where the user’s username is not appearing on the Navbar.

function NavbarScroll() {
const navigate = useNavigate();
const [user, setUser] = useState(null);

function handleLogout() {

axios.post(${API_URL}/logout)
.then(response => {
Remove the user data from localStorage and set user state to null
localStorage.removeItem(‘user’);
setUser(null);

Navigate to the home page after logging out
navigate(‘/’);
})
.catch(error => {
console.error(error);
});
}

useEffect(() => {
const userData = JSON.parse(localStorage.getItem(‘user’));
console.log(‘userData:’, userData); // add this line to verify the userData value
if (userData !== null) {
setUser(userData);
}
console.log(‘user:’, user);
[]);

return (

<Nav.Link>{user && Welcome, {user.username}}</Nav.Link>

);}export default NavbarScroll;