Infinite scroll turbo stream and initializing 3rd party JS libs

2

I came across Event to know a `turbo-stream` has been rendered and tried copy/pasting my JS into app/javascript/controllers/infinite_scroll_controller.js:

import ApplicationController from "./application_controller";
import { useIntersection } from "stimulus-use";

import anime from "animejs";

export default class extends ApplicationController {
  static targets = ["button"];

  connect() {
    super.connect();
    useIntersection(this, { element: this.buttonTarget });

    var wave = anime
      .timeline()
      .add({
        targets: ".wave path",
        strokeDashoffset: [anime.setDashoffset, 0],
        delay: function (el, i) {
          return i * 250;
        },
        easing: "easeInOutSine",
        duration: 600
      });
  }

  appear() {
    this.buttonTarget.disabled = true;
    this.stimulate("InfiniteScroll#load_more", this.buttonTarget);
  }
}

app/views/posts/index.html.erb

<div id="posts">
  <!-- Turbo infinite scroll -->
</div>

app/views/posts/index.turbo_stream.erb

<%= turbo_stream.append "posts" do %>
  <%= render partial: "posts/list", locals: { post: @posts } %>
<% end %>
<% if @pagy.next.present? %>
  <%= turbo_stream.replace "pagination" do %>
    <%= turbo_frame_tag "pagination", src: posts_path(page: @pagy.next, format: :turbo_stream), loading: :lazy %>
  <% end %>
<% end %>

But to no avail. What should I do?