Keep timing out on trying to click checkboxes

I was trying to figure out why this would keep timing out...

// Check the checkbox
        try {
            // Get the element handle for the checkbox
            const elementHandle = await page.getByRole('checkbox');

            // Validate that elementHandle is not undefined
            if (!elementHandle) {
                throw new Error(`No element found with testId ${checkbox.label}`);
            }

            // Wait for the checkbox to be visible
            await expect(elementHandle).toBeVisible();
        
            await checkbox.check();

            // Get the background color of the checked checkbox
            const bgColor = await checkbox.evaluate(el => getComputedStyle(el.parentElement).backgroundColor);

            // Convert RGB color to Hex
            const hexColor = rgbToHex(bgColor);

            // Verify the background color
            if (hexColor !== '#207B81') {
                console.log(`Checkbox with color ${hexColor} does not match expected #207B81`);
                allCheckboxesHaveCorrectColor = false;
                break;
            }

            // Uncheck the checkbox for the next iteration
            await checkbox.uncheck();

        } catch (error) {
            console.error(`Could not check the checkbox: ${error}`);
        }

    }

and then realized that the components we are using - Quasar (https://quasar.dev/) - does this weird stuff with the underlying elements

<input class="hidden q-checkbox__native absolute q-ma-none q-pa-none" type="checkbox">
      <div class="q-checkbox__bg absolute"><svg class="q-checkbox__svg fit absolute-full" viewBox="0 0 24 24"><path class="q-checkbox__truthy" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path><path class="q-checkbox__indet" d="M4,14H20V10H4"></path></svg>
    </div>
</div>```

How do I get the elementHandle with these wrappers?