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.