Error when trying to show modal after clicking button.

// Dependencies
const { ButtonBuilder, ButtonStyle, ModalBuilder, TextInputBuilder, TextInputStyle, ActionRowBuilder } = require("discord.js");

module.exports = async function (interaction) {
    // Variables
    let msg;
    let collector;

    // Buttons
    const editDataButton = new ButtonBuilder()
        .setCustomId("editDataButton")
        .setLabel("EditID")
        .setStyle(ButtonStyle.Primary);
    const editDataRow = new ActionRowBuilder().addComponents(editDataButton);

    // Modals
    const editIDModal = new ModalBuilder()
        .setCustomId("editIDModal")
        .setTitle("EditID")

    // Text Inputs
    const IDInput = new TextInputBuilder()
        .setCustomId("IDInput")
        .setPlaceholder("ID")
        .setStyle(TextInputStyle.Short)
        .setMinLength(1)
        .setMaxLength(20)
        .setRequired(true);

    // Set Modal Components
    editIDModal.addComponents(IDInput);

    msg = await interaction.reply({
    content: "Please edit your account ID below.",
        components: [editDataRow],
    });

    collector = msg.createMessageComponentCollector();

    collector.on("collect", async (i) => {
        if (i.customId == "editDataButton") {
            await interaction.showModal(editIDModal)
        }
    });
};