collector problems and error

            const row = new ActionRowBuilder<ButtonBuilder>().addComponents(bttn1, bttn2);

            const reply = await interaction.reply({
                content: "Proceed Ban?",
                components: [row]
            })
            const collector = reply.createMessageComponentCollector({ componentType: ComponentType.Button })
            collector.on("collect", async (i: ButtonInteraction) => {
                switch (i.customId) {
                    case "confirmBan": {
                        if (i.user.id !== interaction.user.id) {
                            return await i.reply({
                                content: "You are not permitted to use this button!",
                                ephemeral: true
                            })
                        }
                        await interaction.guild?.bans.create(user)
                        await i.update({
                            content: `Confirmed ban for ${user}\nThey are gone!`,
                            components: []
                        })
                    }
                    break;

            const row = new ActionRowBuilder<ButtonBuilder>().addComponents(bttn1, bttn2);

            const reply = await interaction.reply({
                content: "Proceed Ban?",
                components: [row]
            })
            const collector = reply.createMessageComponentCollector({ componentType: ComponentType.Button })
            collector.on("collect", async (i: ButtonInteraction) => {
                switch (i.customId) {
                    case "confirmBan": {
                        if (i.user.id !== interaction.user.id) {
                            return await i.reply({
                                content: "You are not permitted to use this button!",
                                ephemeral: true
                            })
                        }
                        await interaction.guild?.bans.create(user)
                        await i.update({
                            content: `Confirmed ban for ${user}\nThey are gone!`,
                            components: []
                        })
                    }
                    break;

No overload matches this call.
  Overload 1 of 3, '(event: "end", listener: (collected: Collection<string, ButtonInteraction<CacheType>>, reason: string) => Awaitable<void>): InteractionCollector<...>', gave the following error.
    Argument of type '"collect"' is not assignable to parameter of type '"end"'.
  Overload 2 of 3, '(event: "dispose" | "collect" | "ignore", listener: (interaction: ButtonInteraction<CacheType>) => Awaitable<void>): InteractionCollector<ButtonInteraction<CacheType>>', gave the following error.

No overload matches this call.
  Overload 1 of 3, '(event: "end", listener: (collected: Collection<string, ButtonInteraction<CacheType>>, reason: string) => Awaitable<void>): InteractionCollector<...>', gave the following error.
    Argument of type '"collect"' is not assignable to parameter of type '"end"'.
  Overload 2 of 3, '(event: "dispose" | "collect" | "ignore", listener: (interaction: ButtonInteraction<CacheType>) => Awaitable<void>): InteractionCollector<ButtonInteraction<CacheType>>', gave the following error.