Глобальная переменная не обновляется

Я пытаюсь сделать генератор шуток Чака Норриса. У меня есть кнопка «Создать новую шутку», которая извлекает новую шутку из API, и у меня есть несколько кнопок с разными категориями шуток.

У меня есть глобальная переменная с именем categories, которую я пытаюсь изменить всякий раз, когда нажимается кнопка категории, но переменная продолжает иметь значение по умолчанию, когда извлекается новая шутка.

Что я делаю не так ?

Вот код:

document.addEventListener('DOMContentLoaded', start);
let category = 'animal';

async function fetchJoke(arrayz) {
    const response = await Promise.all(arrayz.map(url => fetch(url).then(response => response.json())));

    return response;
}

function start() {
    console.info('ready');
    fetchJoke(arrayz).then(render);
}

const arrayz = [`https://api.chucknorris.io/jokes/random?category=${category}`, 'https://api.chucknorris.io/jokes/categories'];


function render(data) {
    const main = document.querySelector('main');
    main.innerHTML = '';
    const clone = document.querySelector('.template').content.cloneNode(true);
    const joke = clone.querySelector('p');

    joke.textContent = data[0].value;

    clone.querySelector('.zbutton').addEventListener('click', () => {
        start();
    });
    createButton(data, clone);

    main.appendChild(clone);
}

function createButton(data, clone) {
    data[1].map(category => {
        const button = document.createElement('button');
        button.appendChild(document.createTextNode(category));
        button.addEventListener('click', (e) => {
            category = e.target.innerText;
            start();
        });

        clone.querySelector('.buttons').appendChild(button);
    })
}

Ссылка на jsfiddle

Https://jsfiddle.net/rcej8mkf/4/