Upgrading SLEEKY plugin for YOURLS to use new Unsplash API for background

Question

I have a simple YOURLS link shortening website running the Sleeky theme plugin. The background set in config.php as

define('backgroundImage', 'https://source.unsplash.com/category/landscape');

It seems the old API does not work any more so the background function is broken.

I tried running the following js to try and make it work but I am obviously doing something fundamentaly wrong:

<script type="text/javascript">
fetch("https://api.unsplash.com/search/photos?query=landscape&client_id=Uy5IEeK_PUDpPksrzxKLZeA3LCN2t3gXjP9ruCiQZfk")
    .then(
        function(response){
            console.log(response);
            
            if(response.status !== 200){
                console.log("There was a problem. Status code: " + response.status);
                return;
            }

            response.json().then(
                function(data){
                    document.body.style.backgroundImage = 'url("data["results"][0]["urls"]["regular"]")';
                }
            )
        }
    )
    .catch(
        function(err){
            console.log(err+'404');
        }
        )
</script>

Console log:

(index):5 Response {type: 'cors', url: 'https://api.unsplash.com/search/photos?query=lands…nt_id=Uy5IEeK_PUDpPksrzxKLZeA3LCN2t3gXjP9ruCiQZfk', redirected: false, status: 200, ok: true, …}body: (...)bodyUsed: trueheaders: Headers[[Prototype]]: Headersappend: ƒ append()delete: ƒ delete()entries: ƒ entries()forEach: ƒ forEach()get: ƒ ()has: ƒ has()keys: ƒ keys()set: ƒ ()values: ƒ values()constructor: ƒ Headers()Symbol(Symbol.iterator): ƒ entries()Symbol(Symbol.toStringTag): "Headers"[[Prototype]]: Objectok: trueredirected: falsestatus: 200statusText: ""type: "cors"url: "https://api.unsplash.com/search/photos?query=landscape&client_id=Uy5IEeK_PUDpPksrzxKLZeA3LCN2t3gXjP9ruCiQZfk"[[Prototype]]: ResponsearrayBuffer: ƒ arrayBuffer()blob: ƒ blob()body: (...)bodyUsed: (...)clone: ƒ clone()formData: ƒ formData()headers: (...)json: ƒ json()ok: (...)redirected: (...)status: (...)statusText: (...)text: ƒ text()type: (...)url: (...)constructor: ƒ Response()Symbol(Symbol.toStringTag): "Response"get body: ƒ body()get bodyUsed: ƒ bodyUsed()get headers: ƒ headers()get ok: ƒ ok()get redirected: ƒ redirected()get status: ƒ status()get statusText: ƒ statusText()get type: ƒ type()get url: ƒ url()[[Prototype]]: Object

Would you be able to steer me in the right direction please?