Warning: Encountered two children with the same key

[alexanderbrodko]

On codesandbox, there is a huge amount of warnings looking as follow:

Warning: Encountered two children with the same key, 'https://codesandbox.io/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fimage.2b1cff1a.gif&w=3840&q=75'. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
    at span
    at span
    at div
    at div
    at Carousel (https://zmbhw7.csb.app/node_modules/bearing/dist/index.js:105:18)
    at div
    at App (https://zmbhw7.csb.app/src/App.tsx:55:32)

[rosingrind]

URL of slide is used as the key parameter in next lines:

bearing/src/bearing/index.tsx

Lines 78 to 86 in c019be7

	<Slide
	key={s}
	src={s}
	animation={animation}
	offset={key}
	move={move}
	len={slides.length}
	size={size}
	/>

bearing/src/bearing/index.tsx

Line 95 in c019be7

<button type="button" key={i} className={cns.dot(key === current)} onClick={() => getPos(key)}>

This leads to producing these warnings as slides contain an array of same strings. As a solution to this issue, either key should contain source strings with hash appended, or refactoring of render system should be considered as option. These warnings are emitted each animation cycle, so may be the fundamental issue taking place there