Using express js I can't render items on screen. It goes blank. Full stack

I am using express nodejs to create a fullstack app, this page has to show users and products but it is rendering a blank page. If I delete the {} of user, it renders the page but with no results.

import React, { useContext, useState } from 'react';
import CoffeeContext from '../contexts/CoffeeContext';
import { Link } from "react-router-dom";
import '../App.css'
import UserContext from '../contexts/UserContext';


function CoffeeList(props) {
    let { deleteCoffee } = useContext(CoffeeContext);

    let { user } = useContext(UserContext)

    return (
        <CoffeeContext.Consumer>
         {
            ({ coffee }) => {
                return <div>
                    <h1>Posts</h1>
                    <h4>Hello <span> {user.username}'Insert user's name here' Thanks for visiting our website!</span></h4>
                    <a href="/coffee/new"><button>Add New Post</button></a>
                    <div>
                        {coffee.map((c) => {
                            console.log(coffee)
                            return (
                                <div key={c._id}>
                                    <h2>{c.name}</h2>
                                    <Link to={`/edit/${c._id}`}>
                                    <button>Edit</button>
                                    </Link>
                                    <button onClick={() => { deleteCoffee(c._id)}}>Delete</button>
                                    <h6>{user.username}</h6>
                                </div>
                            )
                        })}
                    </div>
                </div>
            }
        }
        </CoffeeContext.Consumer>

    );
}


export default CoffeeList;