'Erroneously (?) getting a "non-unique id" warning in Chrome

This is a Next.js project with Mantine as a component library. Copied their login form example, made a few changes and now I'm getting this warning in Chrome's console.

[DOM] Found 3 elements with non-unique id #: (More info: <the link to google>) 
<input placeholder="[email protected]" id="mantine-mj0krggdl" type="text" required aria-invalid="false" class="mantine-TextInput-defaultVariant mantine-TextInput-input mantine-g773hu" value> 
<input placeholder="Your password..." id="mantine-jyfhjrdw4" type="password" required aria-invalid="false" class="mantine-TextInput-defaultVariant mantine-TextInput-input mantine-g773hu" value>
<input id="mantine-3wbj5hy47" type="checkbox" class="mantine-1590boo mantine-Checkbox-input">

Their ids are clearly different. There are no other warnings/errors so what did am I missing?

Thanks!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Erroneously (?) getting a "non-unique id" warning in Chrome

Sources

Related Questions