Fetch API Updating Counter

I want to create a counter where it would display the population of a country and go update with fetch API. An example of this is here, https://www.worldometers.info/. I am using rapidAPi, country population, https://rapidapi.com/aldair.sr99/api/world-population/, and I have set up a function do so, however it does not work.

This is my code, I have cut out RapidAPI Key for oblivious reason.

<table>
    <tr>
        <th>Canada Population</th>
    </tr>
    <tr>
        <td id="canadaPopulation"></td>
    </tr>
</table>


<script>

const options = {
    method: 'GET',
    headers: {
        'X-RapidAPI-Key': '',
        'X-RapidAPI-Host': 'world-population.p.rapidapi.com'
    }
};

fetch('https://world-population.p.rapidapi.com/population?country_name=Canada', options)
    .then(response => response.json())
    .then(response => {
        document.getElementById("canadaPopulation").innerHTML = response.body.world_population;
    })
    .catch(err => console.error(err));

    function updatePeople() {
    document.getElementById("canadaPopulation").innerHTML = parseInt(document.getElementById("canadaPopulation").innerHTML) + 11
} setInterval(updatePeople, 100)
</script>

This is what shows up on my pageenter image description here