Trouble with collector and interactions

async function handleListReactions(interaction) { //line 237
  if (!reactions || Object.keys(reactions).length === 0) {
    console.log("No reactions configured.");
    return interaction.reply({
      content: "No reactions configured.",
      ephemeral: true,
    });
  }

  let page = 0;
  const itemsPerPage = 5; //line 247
  const keys = Object.keys(reactions);
  const totalPages = Math.ceil(keys.length / itemsPerPage);

  const createEmbed = () => {
    const start = page * itemsPerPage;
    const currentItems = keys.slice(start, start + itemsPerPage);
    return new EmbedBuilder()
      .setTitle("Reactions List")
      .setDescription(
        currentItems //line 257
          .map(
            (key) =>
              `**Trigger:** ${key}\n**Emoji:** ${
                reactions[key].emoji || "None"
              }\n**Message:** ${reactions[key].message || "None"}`
          )
          .join("\n\n")
      )
      .setColor(0x0099ff)
      .setFooter({ text: `Page ${page + 1} of ${totalPages}` });  //line 267
  };

  await interaction.reply({
    embeds: [createEmbed()],
    components: [createPaginationRow()],
    ephemeral: true,
  });

  const message = await interaction.fetchReply();
  const collector = message.createMessageComponentCollector({  //line 277
    componentType: 2,
    time: 600000,
  });

  collector.on("collect", async (i) => {
    console.log("Button interaction received");
    await i.deferUpdate().catch(console.error);
    const action = i.customId;

    if (action === "next" && page < totalPages - 1) {  //line 287
      page++;
    } else if (action === "previous" && page > 0) {
      page--;
    } else {
      return i.followUp({
        content: "No more pages in that direction.",
        ephemeral: true,
      });
    }

    await i //line 298
      .update({
        embeds: [createEmbed()],
        components: [createPaginationRow()],
      })
      .catch((error) => console.error("Failed to update interaction:", error));
  });

  collector.on("end", () => {
    interaction //line 307
      .editReply({ components: [] })
      .catch((error) => console.error("Failed to clear components:", error));
  });

  function createPaginationRow() {
    return new ActionRowBuilder().addComponents(
      new ButtonBuilder()
        .setCustomId("previous")
        .setLabel("Previous")
        .setStyle(ButtonStyle.Primary) //line 317
        .setDisabled(page === 0),
      new ButtonBuilder()
        .setCustomId("next")
        .setLabel("Next")
        .setStyle(ButtonStyle.Primary)
        .setDisabled(page >= totalPages - 1)
    );
  }
}  //line 326

async function handleListReactions(interaction) { //line 237
  if (!reactions || Object.keys(reactions).length === 0) {
    console.log("No reactions configured.");
    return interaction.reply({
      content: "No reactions configured.",
      ephemeral: true,
    });
  }

  let page = 0;
  const itemsPerPage = 5; //line 247
  const keys = Object.keys(reactions);
  const totalPages = Math.ceil(keys.length / itemsPerPage);

  const createEmbed = () => {
    const start = page * itemsPerPage;
    const currentItems = keys.slice(start, start + itemsPerPage);
    return new EmbedBuilder()
      .setTitle("Reactions List")
      .setDescription(
        currentItems //line 257
          .map(
            (key) =>
              `**Trigger:** ${key}\n**Emoji:** ${
                reactions[key].emoji || "None"
              }\n**Message:** ${reactions[key].message || "None"}`
          )
          .join("\n\n")
      )
      .setColor(0x0099ff)
      .setFooter({ text: `Page ${page + 1} of ${totalPages}` });  //line 267
  };

  await interaction.reply({
    embeds: [createEmbed()],
    components: [createPaginationRow()],
    ephemeral: true,
  });

  const message = await interaction.fetchReply();
  const collector = message.createMessageComponentCollector({  //line 277
    componentType: 2,
    time: 600000,
  });

  collector.on("collect", async (i) => {
    console.log("Button interaction received");
    await i.deferUpdate().catch(console.error);
    const action = i.customId;

    if (action === "next" && page < totalPages - 1) {  //line 287
      page++;
    } else if (action === "previous" && page > 0) {
      page--;
    } else {
      return i.followUp({
        content: "No more pages in that direction.",
        ephemeral: true,
      });
    }

    await i //line 298
      .update({
        embeds: [createEmbed()],
        components: [createPaginationRow()],
      })
      .catch((error) => console.error("Failed to update interaction:", error));
  });

  collector.on("end", () => {
    interaction //line 307
      .editReply({ components: [] })
      .catch((error) => console.error("Failed to clear components:", error));
  });

  function createPaginationRow() {
    return new ActionRowBuilder().addComponents(
      new ButtonBuilder()
        .setCustomId("previous")
        .setLabel("Previous")
        .setStyle(ButtonStyle.Primary) //line 317
        .setDisabled(page === 0),
      new ButtonBuilder()
        .setCustomId("next")
        .setLabel("Next")
        .setStyle(ButtonStyle.Primary)
        .setDisabled(page >= totalPages - 1)
    );
  }
}  //line 326