The for loop only works once and then stops with Node is detached from document

The for loop is not working. After it’s done with the first, it stops with this error appearing in the console: Error: Node is detached from document

This is the code:

        const articles = await page.$$('body > main > div.min-h-screen > div > div:nth-child(2) > div');
        console.log("Articles: ", articles);
        for (let i = 0; i < articles.length; i++) {
            await articles[i].click('a');
            await page.waitForNavigation();
            await page.waitForSelector('body > main > div > div > .content-titles > h1');

            const pageTitle = await page.waitForSelector('body > main > div > div > .content-titles > h1');
            const title = await pageTitle?.evaluate(el => el.textContent);
            console.log("title: ", title);     
            await page.goBack();
        }

And this is basically what the elements look like:

<div><a href="..."></a><div>