Will you clarify the difference between 2 (seemingly equivalent) pieces of code

Question

I am learning to use fetch and thought I was comfortable with promises but in the following code I don't understand why there have to be 2 .then()'s.

function getInput() {
    fetch(url)
        .then((res1) => {
            return res1.json();
        })
        .then((res2) => {
            console.log(res2.results);
        });
}

Now, to my understanding res1 should be a data blob but if I console.log(res1.json()); it comes back as a promise. Shouldn't the promise be resolved at that point? Why the need for the extra .then()?

In other words, why doesn't this work:

function getInput() {
    fetch(url)
        .then((res) => {
            console.log(res.json().results);
        });
}

It prints undefined where I would expect it to produce the same output as the previous code