The height and width you use in Image props doesn't define the actual height and width of the image.

Use object-fit css property to fill the entire container or use it as you see fit

should i remove the height and width property inside image?

Try using fill prop on the Image Component

tried object-fit:contain; on the image wrapper div but it didnt fill the whole wrapper though

You wont need the object fit or width/height

Do read that ^

@Golden paper wasp is your problem solved?

i haven't figured it out yet but im still studying what should i do