How to use .filter() to narrow down the scope of the next chained locator?

Hi. In my HTML I ahve 6 sections that are have the same data-testid (variant-container). Each section has exactly one heading (unique) and one button. This test is green:

await expect(page
  .getByTestId('variant-container')
  .filter({ has: page.getByRole('heading', { name: 'Rec - Trial 7 days' }) })
).toHaveCount(1);

Indeed, the .filter() does its work and only keeps the section with the correct heading. But this test does not work:

await expect(page
  .getByTestId('variant-container')
  .filter({ has: page.getByRole('heading', { name: 'Rec - Trial 7 days' }) })
  .getByRole('button') // NEW LINE
).toHaveCount(1);

The count is 6! It's like the .filter() never happened and it finds all buttons in the 6 sections with the same data-testid.

Did I misunderstand how .filter() works?