I am currently developing a discord.js bot with node.js and I am using supabase.js for the database.

const roleId = interaction.options.getRole('role').id;
            const { data: memberArray } = await supabase
                .from('guilds')
                .select('member_join[]')
                .eq('guild_id', `${interaction.guild.id}`);

            if (!memberArray.includes(roleId)) {
                memberArray.push(roleId);
            }
            else {
                memberArray.splice(roleId, 1);
            }

            const { data: endResult } = await supabase
                .from('guilds')
                .upsert([{ guild_id: `${interaction.guild.id}`, guild_name: `${interaction.guild.name}`, member_join: memberArray }])
                .eq('guild_id', `${interaction.guild.id}`);

            const message = 'Theese are the current roles I give out to new user now: ' + memberArray;
            return await interaction.reply({ content: message, ephemeral: true });

If I add the first role the array is fine ([ '911629023052972083' ]) however if I add a second one (or remove one) it looks like this: [ '{"member_join":["911629023052972083"]}', '911629064584966175' ]

How can I fix this?