Nested message component collector not firing

  private async handleComponentInteraction(target: GuildMember, initialInteraction: InitialInteraction, interaction: MessageComponentInteraction) {
    if (interaction.isButton()) {
      switch (interaction.customId) {
        case 'manage-demote':
          await this.handleDemoteButton(target, interaction);
          break;
        default:
          break;
      }
    }
  }

  private async handleDemoteButton(target: GuildMember, interaction: MessageComponentInteraction) {
    // this sends
    const reply = await interaction.reply({
      embeds: [createErrorEmbed('Danger Zone', 'Are you sure you want to demote this user?')],
      components: [
        new ActionRowBuilder<ButtonBuilder>()
          .addComponents(
            new ButtonBuilder()
              .setCustomId('manage-demote-confirm')
              .setLabel('Yes, demote them')
              .setStyle(ButtonStyle.Danger),
            new ButtonBuilder()
              .setCustomId('manage-demote-cancel')
              .setLabel('Cancel')
              .setStyle(ButtonStyle.Secondary),
          ),
      ],
   });
   // likewise, I have also tried awaitMessageComponent
   const collector = reply.createMessageComponentCollector({
      filter: (componentInteraction) => componentInteraction.user.id === interaction.user.id,
      time: 30 * 1000,
    });
    collector.on('collect', async (componentInteraction) => {
      // ... never fires
    });
  }