Continuing the loop when the button is pressed (discord.js)

Question

I am trying to make an RPG music bot in discord and I am implementing a battle system when the user presses a button, the battle would continue in the next phase and turn and will end at a certain turn. I tried using a while loop for it, but the problem is the loop always sends all messages at once without waiting for the interaction collector. I tried putting "await" but it still doesn't work. I want the while loop to iterate only when the button is pressed but I cannot seem to figure out how. Any help would be greatly appreciated. Here's my code:

var turn = 1
var phase = 0
var t = 0
while(turn<= 5){
// some stuffs related to the game
const stage_embed = new discord.MessageEmbed()
//made an embed
const msg = await message.channel.send({embeds : [stage_embed] , components : [row]})
// row is a message action row with only one button
const collector = msg.createMessageComponentCollector((interaction) => interaction.user.id == message.author.id)
collector.on("collect" , async(btn) =>{
const id = btn.customId
btn.deferUpdate()
if (id == "c"){
phase += 1
if (phase > 3){
    phase = 0
    turn += 1
   
}
collector.stop()
}})}