Не удается найти элемент по идентификатору с кукловодом

У меня есть следующий элемент в моем коде:

<div class="MuiButtonBase-root MuiListItem-root MuiListItem-gutters MuiListItem-button" tabindex="0" role="button" aria-disabled="false" id="1"><div class="MuiListItemText-root"><span class="MuiTypography-root MuiListItemText-primary MuiTypography-body1">Arne Nordman ([email protected])</span></div><span class="MuiTouchRipple-root"></span></div>

Этот элемент является частью выпадающего списка, который появляется после ввода текста в текстовое поле. К сожалению, когда я использую следующий код, элемент не может быть идентифицирован. В нем говорится: «DOMException: не удалось выполнить« querySelector »для« документа »:« № 1 »не является допустимым селектором».

Вот мой код:

const puppeteer = require("puppeteer");

async function run() {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();

  await page.goto("http://localhost:3000/");

  await page.evaluate(() =>
    [...document.querySelectorAll("button")].map(
      elem => elem.innerText === "Personell & Institutions" && elem.click()
    )
  );

  await page.type("input", "arne");
  await page.waitFor(1000);
  await page.$eval("#1", el => console.log("elemnet is:", el.innerText));
}

run();

Любая помощь будет по-настоящему оценена!