How to find the html/react code of a dropdown made with react?

I am using javascript and puppeteer to scrape info on a site that seems to be made in react. There is a dropdown that contains some options and the trigger is a button element containing a span text. When I trigger the dropdown, only some existing tags change some attributes, but nothing is added in the html code that might represent the actual dropdown options.

I tried react dev tools and I am able to see where the dropdown and the items are. I can see a hierarchy like this: Primitive.div > Select.Item > SelectItem > .... . Select.Item contains the text and numerical value of the option in the dropdown, while SelectItem contains a class name. I tried to search dropdown options by class name and I am able to see each option’s text, but when I try to implement a click event on the desired element it won’t work. Here is the code:

Here is the html code of the button trigger:

<button class="rt-reset rt-SelectTriggercustom-select-trigger" type="button" role="combobox" aria-controls="radix-:r0:" aria-expanded="false" aria-autocomplete="none" dir="ltr" data-state="closed">
     <span class="rt-SelectTriggerInner">
        <span style="pointer-events: none;">Option0</span>
      </span>
</button>

Here is the code I am using to get the options that appear when clicking the button:

    await page.waitForSelector('.custom-select-trigger', { timeout: 60000 });
    
    await page.click('.custom-select-trigger');

    
    const desiredOption = 'Option1';
    const optionClicked = await page.evaluate((desiredOption) => {
        //rt-SelectItem is the class name of each dropdown option
        const options = Array.from(document.querySelectorAll('.rt-SelectItem'));
        const option = options.find(opt => opt.textContent.trim() === desiredOption);
        if (option) {
            const eventClick = new MouseEvent('click', { bubbles: true});
            option.dispatchEvent(eventClick);
            return `Option with text ${desiredOptionText} clicked.`;
        } else {
            return `Option with text ${desiredOptionText} not found.`;
        }
    }, desiredOptionText);

    console.log(optionClicked);

This code finds the desired option correctly and it returns “Option with text Option1 clicked” but it doesn’t actually click the option. What am I doing wrong?