puppeteer selector works for .querySelectorAll() but not .$$()

I’m trying to run the following selector through puppeteer page.$$(".paging:not(.ng-hide) button.paging-button")
This returns an empty array, but when I go to the page and run document.querySelectorAll(".paging:not(.ng-hide) button.paging-button") I get two elements (which is what I want) It’s my understanding that puppeteer uses document.querySelectorAll() under the hood but I don’t know why my selector is broken in puppeteer. Could it be my use of :not()? My query won’t work without that selector since there’s n amount of elements that match my selector without it but only 2 that don’t have the .ng-hide class

Here’s my code

async function advancePage(page)
{
    const pagingButton = await page.$$(PAGING_BUTTON)[1];
    console.log(pagingButton)
    let adHocs = await getCalcsOnPage(page);
    const isButtonDisabled = await page.evaluate(el=>el.disabled,pagingButton)
    if(isButtonDisabled)
    {return adHocs}
    else{
        console.log(chalk.bgBlue("ADVANCING PAGE"))
        await pagingButton.click();
        const nextPageCalcs = await advancePage()
        adHocs.concat(nextPageCalcs)
        return adHocs
    }
    
}

and I have my selectors declared in another file

export const PAGING_BUTTON = ".paging:not(.ng-hide) button.paging-button"