ZoomableImage = ({ className, style, src, alt, width, height }) => {
    const ref = useRef();
    const imageRect = useRef({});
    const [isOpen, setIsOpen] = useState(false);

    const open = () => {
        imageRect.current = ref.current.getBoundingClientRect();
        setIsOpen(true);
    };

    const close = () => {
        setIsOpen(false);
    };

    return (
        <>
            <StyledImage
                className={className}
                style={style}
                src={src}
                alt={alt}
                width={width}
                height={height}
                ref={ref}
                isOpen={isOpen}
                onClick={open}
            />
            <RenderIf isTrue={isOpen}>
                <ZoomedImage src={src} alt={alt} close={close} originalRect={imageRect.current} />
            </RenderIf>
        </>
    );
}
ZoomableImage renders an image that is zoomed in when clicked