Image does not preserve css image fit settings

[pawelkrystkiewicz]

I'm creating downloadable employee card that has employee image. This image one my layout is squared (140x140px) and usually users provide rectangular images with ratio 16:9 rather than mine 1:1.
What happens essential is those images while being properly displayed as fitted to square are squished when exported due to their height.

I have tried s components from both MUI, Mantine and finally made use of my own:

<img
    src={avatar}
    alt={`${lastName} ${firstName}`}
    style={{
    width: 140,
    height: 140,
    borderRadius: '4px',
    objectFit: 'cover',
  }}
 />

All of them display properly on screen but when downloaded they are squished. What can I do to resolve this issue?

I am using exportComponentAsPNG method

Original file was 750x1006px