Inconsistent behaviour with dynamic content

is it possible if angle Shepherd initializes the tour with dynamic content, I have tried it but the tour doesn't work even though I have done a console log and the log results appear

` private addDashboardTourSteps() {

  if (!this.tour || this.dataListTour.value.length === 0) {
    console.log("Tour tidak ada atau tidak ada data tour untuk ditambahkan.");
    return;
}

this.dataListTour.value.forEach(tour => {
    console.log(`Menambahkan langkah untuk tour: ${tour.tour_uuid}`);
    console.log(`Konten: ${tour.content}`);
    console.log(`Elemen ID: ${tour.element_id}`);
    console.log(`Penempatan: ${tour.placement}`);
      this.tour?.addSteps([
          {
              id: tour.tour_name, 
              text: tour.content, // Menggunakan konten dari data
              attachTo: {
                  element: tour.element_id, // Menentukan elemen yang dilampirkan
                  on: tour.placement, // Menentukan penempatan
              },
              buttons: [
                  {
                      text: 'Next',
                      action: this.tour?.next, // Tombol untuk melanjutkan ke langkah berikutnya
                  },
              ],
          },
      ]);
  });`

shipshapecode / shepherd

Inconsistent behaviour with dynamic content #2992