Image render problem, what is reason for that?

[VeNOM4171]

It is next js project.

Version that i have installed is:
"react-inner-image-zoom": "^3.0.2",

I have imported package like below:
import InnerImageZoom from 'react-inner-image-zoom';
import 'react-inner-image-zoom/lib/InnerImageZoom/styles.css';

Following is my line of code
<InnerImageZoom src={https://drive.google.com/uc?id=1S0b6atesVcBJXgpgYz2X8wX3D4Amj3aX&export=view} zoomType="hover" zoomScale={1} />

I got following error on my browser console:
Image with src "https://drive.google.com/uc?id=1S0b6atesVcBJXgpgYz2X8wX3D4Amj3aX&export=view" has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.

I tried to add imgAttributes as below, but didn't worked.
<InnerImageZoom src={https://drive.google.com/uc?id=1S0b6atesVcBJXgpgYz2X8wX3D4Amj3aX&export=view} imgAttributes={{ width: '100%', height: 'auto' }} zoomType="hover" zoomScale={1} />

Following is what is rendered on screen: