How do i solve this CSS object-fit issue?

Question

I'm trying to do an image uploader with an image preview in my React app.

I would like to display the img with the right proportions and cropped by its container.

This is the JSX:

<div className="YourProfileImg">
  <img
  id="imagePreview"
  src={userData.image}
  />
</div>

The JSX seems to work fine, then I style my #imagePreview with object-fit in this way:

#imagePreview {
  width: 130px;
  height: 130px;
  object-fit: cover;
  object-position: center;
}

this is the CSS applied to YourProfileImg:

.YourProfileImg {
  position: absolute;
  overflow: hidden;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background-color: yellow;
}

but seems to work only with some images.

For example here the image is stretched.

While here the image is not stretched.

Am I writing the code incorrectly or am I missing something?