Component is not rendering completely on the page. React

I'm doing fullstack using react and express js including JWT. The page is not rendering the complete component I imported, it only renders the text but not the functions within it. What I'm trying to do is display the username on the page.

I appreciate any help!

This is my UserProvider.js

import axios from "axios";
import UserContext from "./UserContext";
import React from "react";

import { useEffect, useState } from "react";

export const UserProvider = (props) => {

    const baseUrl = "http://localhost:3000/api/users/";
    const [ user, setUser ] = useState([]);

    useEffect(() => {
        async function fetchData() {
            await getAllUsers();
        }
        fetchData();
    }, []);

    function getAllUsers() {
        return axios.get(baseUrl).then(response => setUser(response.data))
    };



    function createUser(username, password, firstName, lastName) {       
        let user = { username, password, firstName, lastName };
        return axios.post(baseUrl, user)
            .then(response => {
                return new Promise(resolve => resolve(response.data));
            }
        );
    }

    function signInUser(username, password) {
        let user = { username, password };

        return axios.post(`${baseUrl}/login`, user)
            .then(response => {
                localStorage.setItem('myPostsToken', response.data.token)
                return new Promise(resolve => resolve(response.data));
            }
        );
    }

    return (
        <UserContext.Provider value={{
            user,
            createUser,
            signInUser
        }}>
            { props.children }
        </UserContext.Provider>
    )
}

This is my UserList.js

import React, { useContext, useState } from 'react';
import '../App.css'
import UserContext from '../contexts/UserContext';

function UsersList(props) {

    return (
        <UserContext.Consumer>
         {
            ({ user }) => {
                return <div>
                    <h3>Welcome back </h3>
                    <div>
                        {user.map((u) => {
                            console.log(user)
                            return (
                                <div>
                                <div>
                                    <h2>{u.name}</h2>
                                    <p>{"user's name goes here"}</p>
                                    </div>
                                </div>
                            )
                        })}
                    </div>
                </div>
            }
        }
        </UserContext.Consumer>
    );
}


export default UsersList;

This is my UserContext.js

import React from "react";

const UserContext = React.createContext();


export default UserContext;

This is my App.js

import React from 'react';
import { Route, BrowserRouter, Routes, Link } from 'react-router-dom'
import SignIn from './components/SignIn'
import SignUp from './components/SignUp'
import PostsList from './components/PostsList'
import NewPosts from './components/NewPosts'
import { PostsProvider } from './contexts/PostsProvider';
import { UserProvider } from './contexts/UserProvider';
import { EditPosts } from './components/EditPosts';
import './App.css'
import NavBar from './components/NavBar';
import UsersList from './components/UsersList'

function App() {
  return (
    <div className='app'>
        <NavBar />
    <UserProvider>
    <PostsProvider>
        <div>
            <BrowserRouter>
                <Routes>
                    <Route exact path="/" element={ <SignIn /> } />
                    <Route path="/signin" element={ <SignIn /> } />
                    <Route path="/signup" element={ <SignUp /> } />
                    <Route path="/posts/new" element={ <NewPosts /> } />
                    <Route path="/postsList" element={ <PostsList /> } />
                    <Route path="/edit/:id" element={ <EditPosts /> } />
                    <Route path="/users/" element={ <UsersList /> } />
                </Routes>
            </BrowserRouter>
        </div>
    </PostsProvider>
    </UserProvider>
    </div>
  );
}

export default App;