I have created a react app that gives the following output as HTML:

import './App.css';

import Home from './Home';

function App() {
  return (
    <div className="Apps">
    <strong>"root1"</strong>
      <div className="content">
       
    <p>"root"</p>
      </div>
    </div>
  );
}

export default App;

My goal here is to basically retrieve "root1" from the <strong> tag under the Apps class. I have written the following code but it doesn't retrieve the data:

const puppeteer = require("puppeteer")
const fs = require("fs/promises")

async function start() {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto("https://token-pric-213.herokuapp.com/")

  const names = await page.evaluate(() => {
    return Array.from(document.querySelectorAll(".Apps strong"), els => els.map(el => el.textContent))
  })
  await fs.writeFile("names.txt", names.join("\r\n"))


  await browser.close()
}

start()

When I run the script, a new text file is created but it is empty instead of showing "root1". Can someone help me? Thanks for your time!