can't render hover state in percy/playwright component test

[Hives]

I'm trying to write a component test to test the hover state of a React component. I'm using @percy/playwright and @playwright/experimental-ct-react. I'm using playwright's page.locator().hover() to activate the element's hover state.

Here's some example code:

// TestComponent.jsx
import styles from './test-component.module.scss';

export const TestComponent = () => (
  <div className={styles.myClass}>Hello world</div>
);

// test-component.module.scss
.myClass {
    background-color: red;
}

.myClass:hover {
    background-color: green;
}

// hover-state-test.playwright.spec.js
import { expect, test } from '@playwright/experimental-ct-react';
import { TestComponent } from './TestComponent';

const percySnapshot = require('@percy/playwright');

test('hover state', async ({ mount, page }) => {
  await mount(<TestComponent />);
  await page.locator('text=Hello world').hover();
  // await expect(page).toHaveScreenshot();
  await percySnapshot(page, 'hover-state-test.png');
});

when i generate a screenshot using Playwright with await expect(page).toHaveScreenshot() i get the expected behvaiour - the :hover state is applied and the background is green.

but when i generate a screenshot via Percy with await percySnapshot(page, 'hover-state-test.png') the :hover state is not applied and the background is red.

what do i need to do to get Percy to render the hover state?