What is the useId hook in React 18, what SSR hydration problem does it solve compared to Math.random(), and what are valid vs invalid use cases?

Imagine you have two identical toy cars and you need to give each a special name tag so you can tell them apart. useId is like a magic machine that gives each car a unique name tag that stays the same even if you take the cars apart and put them back together. Before, people used random numbers for name tags, but those could change and cause confusion.