Pass Cheerio element to Puppeteer to have it clicked

I'm scraping a website and I'm using Cheerio and Puppeteer. I need to click a certain button with a given text. Here is my code:

    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://www.website.com', {waitUntil: 'networkidle0'});
    const html = await page.content();

    const $ = cheerio.load(html);
    
    const items = [];
    $('.grid-table-container').each((index, element) => {
        items.push({
            element: $($('.grid-option-name', element)[0]).contents().not($('.grid-option-name', element).children()).text() },
            button: $('.grid-option-selectable>div', element)
        });
    });


    items.forEach(item => {
        if (item.element === 'Foo Bar') {
            await page.click(item.button);
        }
    });

Here is the markup I'm trying to scrape:

<div class="item-table"></div>
<div class="item-table"></div>
<div class="item-table"></div>
<div class="item-table"></div>
<div class="item-table"></div>
<div class="item-table"></div>
<div class="item-table">
    <div class="grid-item">
        <div class="grid-item-container">
            <div class="grid-table-container>
                <div class="grid-option-header">
                    <div class="grid-option-caption">
                        <div class="grid-option-name">
                            Foo Bar
                            <span>some other text</span>
                        </div>
                    </div>
                </div>
                <div class="grid-option-table">
                    <div class="grid-option">
                        <div class="grid-option-selectable">
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="item-table"></div>
<div class="item-table"></div>

Clicking on Cheerio element doesn't work. So, does exist any way to do it?