fix(react): use useId instead of getInstanceId

[tay1orjones]

Brought up in slack, there's quite a few components that use setupGetInstanceId() where they could/should be using useId() because:

1. useId in React 18+ is unified between server and client
2. useId has internal state to guard the id from changing based on rerenders of the parent component

The specific issue that highlighted this was that Modal's unique id changes every time it re-renders (example). To avoid this you currently have to move state downwards (example), which isn't possible in all cases. Elsewhere in the codebase setupGetInstanceId was already guarded from changing on re-renders by using useMemo or useRef.

There are still two class-based components that cannot take advantage of this, OverflowMenu (the old implementation, not the feature flagged one) and DataTable.

Changelog

Changed

• Modify functional components to utilize useId instead of setupGetInstanceId

Testing / Reviewing

For each component:

1. Go to the playground story of each component
2. Open the inspector, find the element with the class containing the unique id
3. Modify a prop in the controls pane, the id should not change

Example of a failure (in prod right now)

2024-07-17.at.13.31.34-Components.Modal.-.Playground.Storybook-Google.Chrome-converted.mp4

Example with this PR

2024-07-17.at.14.52.58-Components.Modal.-.Playground.Storybook-Google.Chrome-converted.mp4

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	2cc8c39
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/6698234367f1fa00084426e5
😎 Deploy Preview	https://deploy-preview-16988--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	2cc8c39
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/6698234381e4c700082e63df
😎 Deploy Preview	https://deploy-preview-16988--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[guidari]

Interesting catch! LGTM! 🚀

[riddhybansal]

Clean !!