Javascript React 图像玻璃放大镜

Question

I have this glass magnifier (from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_magnifier_glass ), which is opening fine onClick in my react project, but I want to make it to toggle open/close on further clicks but it is not closing.

This is my function which is supposed to achieve that, but somehow the zoom remains always open, no matter if my zoomActive state is set at true or false. Can anyone tell me what am I doing wrong? Thanks!

 const [zoomActive, setZoomActive] = useState(false)

    /* Initiate Magnify Function
with the id of the image, and the strength of the magnifier glass:*/
    const handleMagnifier = () => {
        setZoomActive(!zoomActive)
        zoomActive && magnify(myImageId, 3)
        console.log('MAGNIFIER-GLASS-STATE???', zoomActive)
    }

Here the onClick function:

 <div
                                    className="img-magnifier-container"
                                    onClick={handleMagnifier}
                                >
                                    <img
                                        id={myImageId}
                      
                                        src={graphicImage}
                                        alt="mobile graphic"
                                    />
                                </div>

And the CSS:

.img-magnifier-container {
    position: relative;
    cursor: zoom-in;
}
.img-magnifier-glass {
    position: absolute;
    border: 3px solid $tangerine;
    border-radius: 50%;
    cursor: none;
    /*Set the size of the magnifier glass:*/
    width: 200px;
    height: 200px;
}

Answer 1

Just in case it helps anyone, removing the class did the trick for me. Like this:

 const handleMagnifier = () => {
        setZoomActive(!zoomActive)
        let glass = document.getElementsByClassName('img-magnifier-glass')
        !zoomActive ? magnify(myImageId, 3) : glass[0].removeAttribute('class')
    }

Not sure if it is the best approach, but it works.