React Image Magnifiers not working when zoom in using nextjs

Question

I want to make image zoom in when hover and using this plugin react-image-magnifiers usually it's fine when i make without next.js but when i using next.js just showing image and when i try to hover my mouse to the image, and then zoom in not working, maybe there is any mistake in my next.config.js ?

This is my next.config.js

const withPlugins = require('next-compose-plugins');
const withCss = require('@zeit/next-css');
const withSass = require('@zeit/next-sass');
const withImages = require('next-images');

const nextSettings = {
    exportTrailingSlash: true,
    exportPathMap: function() {
        return {
            '/': { page: '/' },
        };
    },
};

module.exports = withPlugins([[withSass(withCss({
    webpack: function (config) {
        config.module.rules.push({
            test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 100000,
                    name: '[name].[ext]'
                }
            }
        })
        return config
    }
})), withImages()]]);

And this is my Gallery.jsx

import React from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";
import { SideBySideMagnifier } from "react-image-magnifiers";

export default function GallerySide (props) {
    const dataImage = props.product;

    const [state, setState] = React.useState({
        alwaysInPlace: false,
        overlayOpacity: 0.6,
        switchSides: false,
        fillAvailableSpace: false,
        fillAlignTop: false,
        fillGapLeft: 0,
        fillGapRight: 10,
        fillGapTop: 10,
        fillGapBottom: 10,
        largeImage: dataImage[0].largeImage,
    });

    const {
        alwaysInPlace,
        overlayOpacity,
        switchSides,
        fillAvailableSpace,
        fillAlignTop,
        fillGapLeft,
        fillGapRight,
        fillGapTop,
        fillGapBottom,
        largeImage
    } = state;

    const ArrowLeft = (props) => (
        <a href="#disabled" {...props} className="grist-prev">
            <i className="fas fa-chevron-left"></i>
        </a>
    );

    const ArrowRight = (props) => (
        <a href="#disabled" {...props} className="grist-next">
            <i className="fas fa-chevron-right"></i>
        </a>
    );

    const settings = {
        dots: false,
        infinite: true,
        speed: 500,
        slidesToShow: 4,
        slidesToScroll: 1,
        prevArrow: <ArrowLeft />,
        nextArrow: <ArrowRight />,
    };

    const ChangeSlider = (event) => {
        setState({ 
            alwaysInPlace: false,
            overlayOpacity: 0.6,
            switchSides: false,
            fillAvailableSpace: false,
            fillAlignTop: false,
            fillGapLeft: 0,
            fillGapRight: 10,
            fillGapTop: 10,
            fillGapBottom: 10,
            largeImage: event,
        });
    }

    return (
        <>
            <SideBySideMagnifier
                className="grist-input-position"
                style={{ order: switchSides ? "1" : "0" }}
                imageSrc={largeImage}
                largeImageSrc={largeImage}
                alwaysInPlace={alwaysInPlace}
                overlayOpacity={overlayOpacity}
                switchSides={switchSides}
                zoomPosition="left"
                inPlaceMinBreakpoint={641}
                fillAvailableSpace={fillAvailableSpace}
                fillAlignTop={fillAlignTop}
                fillGapTop={fillGapTop}
                fillGapRight={fillGapRight}
                fillGapBottom={fillGapBottom}
                fillGapLeft={fillGapLeft}
                zoomContainerBorder="1px solid #ccc"
                cursorStyle="zoom-in"
            />
            
            <div className="col-12 mt-2">
                <div className="col-11 mx-auto">
                    <Slider {...settings}>
                        {dataImage.map((data, index) => 
                            <a href="#disabled" key={index} onClick={() => ChangeSlider(data.largeImage)}>
                                <div className="card m-2">
                                    <div className="card-body p-0">
                                        <img src={data.thumbImage} width="100%" alt="Grist" />
                                    </div>
                                </div>
                            </a>
                        )}
                    </Slider>
                </div>
            </div>
        </>
    );
}

I hope there is a solution for this or another way to make like this.

UPDATE :

i solved the problem, it because i have scss call "typhography.scss" and make tag "img" max-width: 100%, because of that my image always set 100% of width, by disable or remove this line

img {
     max-width: 100%;
}

it's work perfectly, thanks.

Answer 1

The right answer is the one marked as correct.

To disable in a general way use this css rule:

img {
    max-width: unset !important;
}

Answer 2

i solved the problem, it because i have scss call "typhography.scss" and make tag "img" max-width: 100%, because of that my image always set 100% of width, by disable or remove this line

img {
     max-width: 100%;
}

it's work perfectly.