Fetched with fetch(), but can't display it with DOM API (help)

I have an exam tomorrow, so if anyone could help me with this problem, I’d be very thankful.
The thing is I fetch the data with fetch() API, then inside .then I have a function to only select names and emails, create <li> elements, change some inner HTML, and then try to append the object which contains all <li> elements to <ul> element. But although the DocumentFragment object called “list” looks fine when I check it with console.log(), it just doesn’t seem to work.
Here is the code, it’s pretty straight-forward.
When I do the same thing, but without the fetch API, “list” object looks the same to me, and it works. So I don’t understand where is the problem. This is the same code but without fetch():
Thank you all in advance!

try moving all of that into the .then( )

    .then((response) => {
        return response.json();
    .then((data) => {
        let authors = data;
        // mapAuthors function creates an li, adds it to list Document fragment
    .catch(function (error) {

Also, I changed .map to .forEach because you don’t need the array that .map returns.