How do i get the ember-concurrency ajax-throttling example to work in my dev environment?

My question is, what do i need to fix so that my implementation of the ember-concurrency Ajax Throttling example works as expected. Specifically, in my implementation no log entries are displayed (as they are on the example page), and the console.log statement that i added in the loopingAjaxTask inner function is not executed nor is the console.log statement in the task. I have copied the example nearly verbatim with the only changes being that i've added in those console.log statements.

The line 'looping Ajax task outer function' is written to the console 8 times as expected, but the 'looping Ajax task inner function' is never written to the console log. The 'Hello World' text from the component is written to the page.

I am using ember 4.8 and ember-concurrency 2.3.7.

Here's the template where i've included the AjaxThrottling component.

app/templates/example.hbs

<p>Here's where the log entries should appear</p>
<AjaxThrottling />
 

app/components/ajax-throttling.hbs

<div>
    hello world
  <ul>
    
      <li style= ></li>
    
  </ul>
</div>

and here is component's js page

import Component from '@glimmer/component';
import { enqueueTask, task, timeout } from 'ember-concurrency';

function loopingAjaxTask(id, color) {
    console.log('looping Ajax task outer function');
    return function* () {
        console.log('looping Ajax task inner function');
        while (true) {
        this.log(color, `Task ${id}: making AJAX request`);
        yield this.ajaxTask.perform();
        this.log(color, `Task ${id}: Done, sleeping.`);
        yield timeout(2000);
      }
    };
  }

export default class AjaxThrottlingComponent extends Component {

    tagName = '';
    logs = [];
  
    ajaxTask = enqueueTask({ maxConcurrency: 3 }, async () => {
      // simulate slow AJAX
      console.log('inside the task')
      await timeout(2000 + 2000 * Math.random());
      return {};
    });
  
    @task({ on: 'init' }) task0 = loopingAjaxTask(0, '#0000FF');
    @task({ on: 'init' }) task1 = loopingAjaxTask(1, '#8A2BE2');
    @task({ on: 'init' }) task2 = loopingAjaxTask(2, '#A52A2A');
    @task({ on: 'init' }) task3 = loopingAjaxTask(3, '#DC143C');
    @task({ on: 'init' }) task4 = loopingAjaxTask(4, '#20B2AA');
    @task({ on: 'init' }) task5 = loopingAjaxTask(5, '#FF1493');
    @task({ on: 'init' }) task6 = loopingAjaxTask(6, '#228B22');
    @task({ on: 'init' }) task7 = loopingAjaxTask(7, '#DAA520');
  
    log(color, message) {
      let logs = this.logs;
      logs.push({ color, message });
      this.set('logs', logs.slice(-7));
    }
}