I am using react for my project and the requirement is to get magnified view on hover and function call onLoad on load of img and onError on failure of load. I tried various packages but none gives me both of the above simultaneously.

Here is the packages I tried

import { GlassMagnifier } from "react-image-magnifiers";

{
    /* This one tried with react-image-magnifiers doesn't give onError event to control if image load fails*/
}

export const Image = React.memo(() => {
    const onLoad = () => {
        console.log("inside load");
        // do some stuff
    };

    const onError = err => {
        console.log("inside error");
        // do some stuff
    };

    return (
        <>
            <span hidden={!loaded}>
                <GlassMagnifier
                    imageAlt="certificate-preview"
                    imageSrc="https://some-link"
                    className="image"
                    onImageLoad={() => onLoad()}
                    magnifierSize="35%"
                />
            </span>
        </>
    );
});

This one tried with react-image-magnify didn't give expected glass view

import ReactImageMagnify from "react-image-magnify";

{
    /* This one tried with react-image-magnify didn't give expected glass view*/
}

export const Image = React.memo(() => {
    const onLoad = () => {
        console.log("inside load");
        // do some stuff
    };

    const onError = err => {
        console.log("inside error");
        // do some stuff
    };

    const prop = {
        smallImage: {
            src,
            width: 200,
            height: 300,
            alt: "certificate-preview",
            onLoad,
            onError: err => {
                console.log("In small 1st err");
                onError(err);
            },
        },
        largeImage: {
            src: "https://some-link",
            width: 100,
            height: 300,
            alt: "certificate-preview",
            onLoad,
            onError: err => {
                onError(err);
            },
        },
        enlargedImageStyle: {
            objectFit: "contain",
        },
    };

    return (
        <>
            <ReactImageMagnify {...prop} />
        </>
    );
});

This is the expected view

I may be missing something. Any help would be highly appreciable.