How to extract the body as a JSON from a server response in Javascript

I want to insert header response into my HTML, I need to insert response code, headers and body.

I can get the response code and header without issue. However, the body just returns object promise?

This is the JS:

        function GETcall () {
            const url = document.getElementById('url').value;
            fetch(url, {
            method: 'GET', 
            headers: {
            'Content-Type': 'application/json; charset=UTF-8',
        }
        })
        .then((response) => {
            document.getElementById("responseCode").innerHTML = response.status
            console.log("HEADERS =", response)
            document.getElementById("responseBody").innerHTML = response.json()
        })
        .catch((error) => { console.error('Error:', error); });
        }

This is the console and the body is a correctly constructed JSON

I want the JSON that is in the body which I know looks like: {“id”: 1, “name”: “Frozen”, “studio”: “Disney”}