Fix mismatch id prop hydration error

[nozomione]

Issue Number

N/A

Target branch: feature/dataset-integration

(This PR currently targets the dataset feature branch since the error is present. However, it does not affect QA testing and can be merged after the Dataset launch.)

Purpose/Implementation Notes

This PR addresses the following console error message generated on localhost for a better development experience:

Prop id did not match. Server: "8iqic292wa" Client: "gpkvfdwmha"
circle
defs
svg
Samples
...
See more info here: https://nextjs.org/docs/messages/react-hydration-error

Change includes:

• Replaced the cleanupIDs plugin with run-time generated dynamical IDs (using useState and useEffect) to prevent the hydration error.

Types of changes

• Bugfix (non-breaking change which fixes an issue)

Functional tests

N/A

Checklist

• Lint and unit tests pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works
• I have added necessary documentation (if appropriate)
• Any dependent changes have been merged and published in downstream modules

Screenshots

---

After the change:

e.g., For the "Guidelines" SVG, the id value is unique for each instance of the SVG: