SPFx - list username shows in console but not when mapping out object array

Question

I have made a simple SPFx application that is supposed to fetch data from a list in SharePoint Online called "Users". I am using PnP sp to get the list items and the data shows in chromeDevTools-network section as a code 200 that also shows the fetched data in my list. When I try to display the data by using a map function it displays nothing.

The class where I map the data

export interface IListOfUsersProps {
    context: WebPartContext;
}

export const ListOfUsers: React.FunctionComponent<IListOfUsersProps> = (props: React.PropsWithChildren<IListOfUsersProps>) => {
    let listUsersProvider = new ListUsersProvider(props.context);

    const [userList, setUserList] = React.useState<IUser[]>([]);

    const fetchUserListData = async (): Promise<void> => {
        const allUsersFromList: IUser[] = await listUsersProvider.getUsers();

        setUserList(allUsersFromList)
    }

    React.useEffect(() => {
        fetchUserListData().catch((error) => console.log(error));
    }, [])

    return (
        <div>
            <Stack tokens={{ childrenGap: "3px" }} horizontal>
                {userList.map((user) => {
                    <div>
                        {user.Username} //this shows nothing
                        {console.log(user.Username)} //this shows the data in the console
                    </div>
                })}
            </Stack>
        </div>
    );
};

My provider class where I fetch the data

export interface IListUsersProvider {
    getUsers(): Promise<IUser[]>
}

export default class ListUsersProvider implements IListUsersProvider {
    private _sp: SPFI;

    constructor(context: WebPartContext) {
        this._sp = spfi().using(SPFx(context));
    }

    public async getUsers(): Promise<IUser[]> {
        const items: IUser[] = await this._sp.web.lists.getByTitle("Users").items();

        return items;
    }
}

The Model class

export interface IUser {
    ID: number;
    Username: string;
    FOW: string;
    Age: number;
}

I don't think there is anything wrong with the code but I might be wrong, it just doesn't make sense that it shows in the console and in the network section. Any guidance and explanation is welcome.

UPDATE: My dumbass forgot to put a return statement inside the map function. So I basically needed to do:

   <Stack tokens={{ childrenGap: "3px" }} horizontal>
        {userList.map((user) => {
            return (
                <Text>{user.Username}</Text>
            )
        })}
    </Stack>