Bug: useId IDs have special characters that conflict with certain DSLs (like CSS)

[EthanStandel]

The ID scheme for the useId hook returns IDs that look like ":S1:", but : is not a valid character for CSS identifiers and must be escaped. On client-only components, you can wrap the ID in CSS.escape but the CSS global object doesn't exist on the server so this doesn't work for server-component renders.

React version: 18.2

Steps To Reproduce

1. Try utilizing the id's created by useId in CSS identifiers.
2. It doesn't work.

Link to code example: https://stackblitz.com/edit/react-ts-zhtk6u?file=Example.tsx

The current behavior

The current implementation of useId creates IDs with special characters which can conflict with certain DSLs (in this example, CSS) that React has to commonly interact with.

The expected behavior

Don't use special characters in IDs created by useId.