How do you make it when the zoom in slider image is full?

'm asking for help, I have a problem if the slider in the hover image is small in size not full or not covered, but if the large size image is completely covered, how to be the same, my tools use the react-slick plugin for the slider and for the zoom hover react-image-magnify

to see full and run the code in the link below

https://codesandbox.io/embed/m4z84581p8

below this is a wrong picture, it should be when the image hover meets the border box

after zoom


before hover or zoom

but if the image is large when hovered or zoomed then the image is full box

before

what I want is if the image is different either on hover or on zoom the image meets the border box box, like the example of the following link or picture no. 2

https://www.tokopedia.com/laris88/640-adjustable-shoes-organizer-tempat-sepatu?trkid=f=Ca0000L000P0W0S0Sh,Co0Po0Fr0Cb0_src=search_page=1_ob=23_q=sepatu_po=29_catid=1372<=/searchproduct%20-%20p6%20-%20product