Stimulus.js RangeError Issue

highlightable_controller.js

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static values = { highlighted: Boolean };
  static classes = ["highlighted"];

  toggle() {
    this.highlightedValue = !this.highlightedValue;
  }

  highlightedValueChanged() {
    this.updateClasses();
    this.dispatch("toggled");
  }

  updateClasses() {
    if (this.highlightedValue) {
      this.element.classList.add(this.highlightedClass);
    } else {
      this.element.classList.remove(this.highlightedClass);
    }
  }
}

highlightable_count_controller.js

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static outlets = ["highlightable"];
  static targets = ["counter"];

  connect() {
    this.render();
  }

  render() {
    this.counterTarget.innerText = this.highlightableOutlets.filter(
      highlightableOutlet => highlightableOutlet.highlightedValue
    ).length;
  }
}

index.html.erb

<%= tag.div(data: {
  controller: "highlightable-count",
  action: "highlightable:toggled->highlightable-count#render",
  highlightable_count_highlightable_outlet: ".highlightable" }) do %>

  <%= tag.div(data: { highlightable_count_target: "counter" },
    class: "text-sm w-20 p-1 bg-gray-500 text-white rounded mb-4") %>

  <% 50.times.each do |i| %>
    <%= tag.button(i, id: "highlightable-#{i}", data: {
      controller: "highlightable",
      action: "highlightable#toggle",
      highlightable_highlighted_value: [true, false].sample,
      highlightable_highlighted_class: "bg-yellow-100"
    }, class: "highlightable text-sm w-20 p-1 border-2 border-gray-300 rounded mb-1") %>
  <% end %>

<% end %>