Testing hover using React Testing Library & Jest showing property prior to hover action

I have been scratching my head and haven't really found any solid documentation on why, when I use userEvent.hover, the test is not the expected one showing the hover box-shadow. I have tried using mouseEnter and mouseOver with fireEvent to no avail. As you can see below I also tried wrapping it in an async function which hasn't helped. Any ideas? Is it because of the transition?

Thank you in advance.

transition: all 0.2s ease-in-out;
 box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px,
    rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px,
    rgba(0, 0, 0, 0.07) 0px 16px 16px;

  &:hover {
transform: scale(1.05);
transform: translate(0, -0.1rem);
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
      rgba(0, 0, 0, 0.23) 0px 6px 6px;
  }  

Here is the test:

it("should expect the button to shift box-shadow on hover", async () => {
    const { getByRole } = render(
      <PrimaryButton aria-label="sign up">Sign Up</PrimaryButton>
    );
    userEvent.hover(screen.getByText(/sign up/i));
    await waitFor(() => {
      expect(getByRole("button", { name: /sign up/i })).toHaveStyle(
        "box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;"
      );
    });
  });

Here is the result of my RTL/Jest (test):

- box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
+ box-shadow: rgba(0,0,0,0.07) 0px 1px 1px,rgba(0,0,0,0.07) 0px 2px 2px, rgba(0,0,0,0.07) 0px 4px 4px,rgba(0,0,0,0.07) 0px 8px 8px, rgba(0,0,0,0.07) 0px 16px 16px;

  53 |     userEvent.hover(screen.getByText(/sign up/i));
  54 |     await waitFor(() => screen.getByText(/sign up/i));
> 55 |     expect(getByRole("button", { name: /sign up/i })).toHaveStyle(
     |                                                       ^
  56 |       "box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;"
  57 |     );
  58 |   });

As you can see it's stating that my box-shadow should be the one prior to hover. The code works fine, compiles and renders.