there is a warning at the start of rendering "Prop `id` did not match"

[aseph8083]

I'm using next js with typescript, when I start rendering a message appears

[SmileHub]

confirming, having the same warning when using with next.js:

Warning: Prop `id` did not match. Server: "react-svg-pan-zoom_miniature_mask_uid1" Client: "react-svg-pan-zoom_miniature_mask_uid2" Error Component Stack
    at mask (<anonymous>)
    at defs (<anonymous>)
    at g (<anonymous>)
    at MiniatureMask (miniature-mask.js:13:5)
    at RandomUID (RandomUID.js:16:7)
    at g (<anonymous>)
    at g (<anonymous>)
    at svg (<anonymous>)
    at div (<anonymous>)
    at Miniature (miniature.js:22:5)
    at div (<anonymous>)
    at ReactSVGPanZoom (viewer.js:57:14)
    at UncontrolledReactSVGPanZoom (uncontrolled-viewer.js:21:5)

a temporary work around on next.js is to avoid using SSR on this component till it's fixed. Since i'm having it wrapped with ReactSvgPanZoomLoader, so i'm just setting it up without SSR

import dynamic from 'next/dynamic';
const ReactSvgPanZoomLoader = dynamic(() => import('react-svg-pan-zoom-loader').then(mod => mod.ReactSvgPanZoomLoader), { ssr: false });

my code:

    <ReactSvgPanZoomLoader src="/map.svg" render={(content) => (
                <UncontrolledReactSVGPanZoom
                    ref={Viewer}
                    width={500}
                    height={500}
                    onZoom={e => console.log('zoom')}
                    onPan={e => console.log('pan')}
                    onClick={event => console.log('click', event.x, event.y, event.originalEvent)}
                    toolbarProps={toolbarProps}
                    miniatureProps={miniatureProps}
                >
                    <svg width={500} height={500}>
                        {content}
                    </svg>
                </UncontrolledReactSVGPanZoom>
        )} />
    </div>;