Using BleepsAnimator and Animator causes hydration failure (How to mitigate?)

[VerdeVistaVoyager]

Describe the bug

Using BleepsAnimator and Animator causes client hydration errors in console.

To reproduce

Steps to reproduce the behavior:

Use BleepsAnimator and/or Animator.
Run the app.
Open the app in your browser and view browser dev tools.
See the error messages.

Expected behavior

See no error messages (Using these Awres components should not create hydration issues HTML).
See example in Arwes documentation for how to run the animator examples without causing Hydration failure.

Screenshots

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.
    at throwOnHydrationMismatch (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:6789:9)
    at tryToClaimNextHydratableInstance (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:6818:7)
    at updateHostComponent$1 (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:15520:5)
    at beginWork$1 (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:17355:14)
    at HTMLUnknownElement.callCallback (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:19443:14)
    at Object.invokeGuardedCallbackImpl (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:19492:16)
    at invokeGuardedCallback (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:19567:29)
    at beginWork (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:25711:7)
    at performUnitOfWork (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24540:12)
    at workLoopConcurrent (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24526:5)
    at renderRootConcurrent (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:24482:9)
    at performConcurrentWorkOnRoot (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:23339:38)
    at workLoop (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:261:34)
    at flushWork (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:230:14)
    at MessagePort.performWorkUntilDeadline (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js:537:21)

Development environment

// package.json
  "dependencies": {
    "@arwes/react": "^1.0.0-alpha.23",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.14.7",
    "@mui/material": "^5.14.0",
    "@types/node": "20.4.2",
    "@types/react": "18.2.15",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.14",
    "eslint": "8.45.0",
    "eslint-config-next": "13.4.10",
    "next": "13.4.10",
    "postcss": "8.4.26",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3",
    "typescript": "5.1.6"
  }

// Node version
v18.16.0

// OS
Ubuntu 20.04

## Testing environment

// Browser
Chrome

[romelperez]

Hello @VerdeVistaVoyager!

I need a reproducible example to properly test it. You can create a codesandbox or just a snippet with the entire smallest possible use case which reproduces the error.

Thanks for reporting!

[VerdeVistaVoyager]

@romelperez Good work on @arwes btw. 💯

I think this can be combined with this issue: #213 (comment)