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>;