Jest assert on style after animate is performed

I have a React Application using Jest and React Testing Library for unit testing. I have difficulties asserting that a component's style has changed. My component takes in an isSelected boolean and performs an animation based on that.

My component: (Using framer-motion)

const MotionImage = motion(Image);

const SCALE_SIZE = 1.5;

export interface IPreviewer{
  isSelected: boolean;
}

export function Previewer({
  isSelected,
}: IPreviewer): JSX.Element {

  return (
    <MotionImage
      animate={{
        scale: isSelected ? SCALE_SIZE : 1,
      }}
    />
  );
}

My test:

test("Component when isSelected highlights the image", () => {
  const { debug } = render(
    <Previewer
      isSelected
    />
  );

  const image = screen.getByRole("img");

  debug(image);

  expect(image).toHaveStyle("transform: scale(1.5) translateZ(0)");
});

The test debug giving me:

     <img
       class="chakra-image css-yk396h"
       src="http://placeimg.com/222.07846627773333/3.4102996091771587"
       style="transform: none;"
      />

As you can see the img is found but the style is not as expected: style="transform: none;"

I will appreciate any suggestions on how to test this right?

Note

Setting initial={false} to the component itself will make the test pass but will lose the initial animation so I will avoid that.

Introducing a timeOut promise inside the test before asserting will work, but I would like to avoid that as well.